1. 程式人生 > >lay-ui +ajax實現分頁

lay-ui +ajax實現分頁

效果圖:
在這裡插入圖片描述

1.建立html頁面 01.html(前臺檔案)

2.建立index.php(後臺檔案)

------------------熱身結束,開始正式分頁之旅------------------

3.在html頁面中引入layui需要用到的css以及js,還有我們自己額外需要用到的jquery

在這裡插入圖片描述
4.在html檔案中,將基本的分頁欄顯示出來

在這裡插入圖片描述
5.好啦,html部分程式碼寫完了,現在要寫html檔案中的script部分程式碼了

在這裡插入圖片描述
6.現在,瀏覽器的顯示效果是這樣的
在這裡插入圖片描述

7.基本的分頁欄以及表頭已經顯示出來了,接下來就要結合ajax將資料顯示出來了

8.我們的思路是這樣的:

–將頁碼(我們定義為p)和使用者選擇的每頁顯示多少條資料(我們定義為limit)傳到php後臺

–php後臺根據接收到的p和limit到資料庫查詢相應資料,並返回給前臺,展示出來

–程式碼是這樣的
在這裡插入圖片描述

9.php後臺處理的程式碼

在這裡插入圖片描述
10.這樣,我們就完成了ajax結合lay-ui實現分頁的功能

注:要引入jquery檔案,這樣我們才能使用$.get(),要引入lay-ui的css和js檔案,這樣我們才能使用layui的元件laypage