laypage.js分頁插件使用方法詳解
更新時間:2019年07月27日 17:29:15 作者:回夢游先
這篇文章主要為大家詳細介紹了laypage.js分頁插件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了laypage.js分頁插件的使用方法,供大家參考,具體內(nèi)容如下
1、引用依賴
a.layui.js
b.layui.css
c.laypage.js
2、HTML代碼部分
<div id="page-nav" style="float: right"></div>
3、js代碼部分
<script> $(function(){ //加載菜單列表數(shù)據(jù) menuPageData(); }); function menuPageData() { //以下將以jquery.ajax為例,演示一個異步分頁 $.getJSON('../../menu/page/1', { rows : 10 //每頁顯示的數(shù)據(jù)條數(shù) }, function (res) { //從第1頁開始請求。返回的json格式可以任意定義 laypage({ cont: 'page-nav', //容器。值支持id名、原生dom對象,jquery對象?!救缭撊萜鳛椤浚?lt;div id="page1"></div> pages: res.pageCount, //通過后臺拿到的總頁數(shù) curr: 1, //初始化當(dāng)前頁 skin: '#5a98de',//皮膚顏色 groups: 5, //連續(xù)顯示分頁數(shù) skip: true, //是否開啟跳頁 count:res.total, //數(shù)據(jù)總數(shù) limit: 10, //每頁顯示的條數(shù)。laypage將會借助 count 和 limit 計算出分頁數(shù) limits:[10, 20, 30, 40, 50], //每頁條數(shù)的選擇項。如果 layout 參數(shù)開啟了 limit,則會出現(xiàn)每頁條數(shù)的select選擇框 first: '首頁', //若不顯示,設(shè)置false即可 last: '尾頁', //若不顯示,設(shè)置false即可 prev: '上一頁', //若不顯示,設(shè)置false即可 next: '下一頁', //若不顯示,設(shè)置false即可 jump: function (e) { //觸發(fā)分頁后的回調(diào) $.getJSON('../../menu/page/' + e.curr, { rows : 10 //每頁顯示的數(shù)據(jù)條數(shù) }, function (res) { console.log(res.rows); var data = res.rows; $("#total-text").html(res.total); /*解析表格分頁數(shù)據(jù)*/ analysisTableData(data); }); } }); }); } </script>
4、效果圖
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中Form表單技術(shù)匯總(推薦)
這篇文章主要介紹了JavaScript中Form表單技術(shù)的相關(guān)資料,包括簡單的表單驗證和正則表達式驗證,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06JavaScript中的子窗口與父窗口的互相調(diào)用問題
本文給大家介紹了JavaScript中的子窗口與父窗口的互相調(diào)用問題,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-02-02JS動態(tài)增加刪除UL節(jié)點LI及相關(guān)內(nèi)容示例
這篇文章主要介紹了JS如何動態(tài)增加刪除UL節(jié)點LI及相關(guān)內(nèi)容,需要的朋友可以參考下2014-05-05