使用layui實現分頁展示資料庫的資料

2022-08-14 05:30:13 字數 1057 閱讀 8820

layui是乙個前端 ui 框架,內建了js**,所以我們可以直接使用內建的分頁

首先要用到layui的官網手冊

1.進入手冊頁面的 」示例「 

2.在示例中找到 「資料**」 -> 「開啟分頁」 -> "檢視**" 。這就是layui內建的分頁**,複製到編輯器即可;

4.修改上圖黃色框中的內容,意思分別是

elem:展示資料的table**,

cols:展示內容,

field:獲取回來的資料欄位名,

width:單元格的寬度,

title:**的表頭名,

sort:給該列使用排序功能,

page:true 開啟下方分頁按鈕,

5.給**指出正確的資料位置 ,」文件「(在示例的旁邊)->」 資料**「  -> ctrl+f 搜尋parsedata複製紅色框中的**

放置到剛才貼上頁面的 " page:true "下面,修改好返回資料的層級關係。

6.還可以設定一些其他東西  如下圖

layui實現資料分頁功能

官網layui table演示頁面 示例截圖 頁面引入layui.css layui.js 前台js var limitcount 10 var curnum 1 列表查詢方法 function productsearch productgroupid,start,limitsize 傳參 cols...

layui實現分頁

分頁在頁面上的顯示 id demo2 div 後台需要傳過來兩個引數,乙個是count,資料總數 乙個是page,當前頁 var nums 10 var count count val layui.use laypage function 當前頁 後台獲取到的 return page page 1 ...

layui實現簡單分頁

第一次寫,有點小緊張!對layui分頁做乙個簡單的總結。首先引用layui和jquery的js就不用再說了,寫一下重點內容 1 定義乙個id為pagebox的div,用於顯示分頁 2 宣告當前頁和總頁數變數 var currpage 1 var pagecount 3 建立分頁的方法 functio...