laypage.js分頁(yè)插件使用方法詳解
本文實(shí)例為大家分享了laypage.js分頁(yè)插件的使用方法,供大家參考,具體內(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為例,演示一個(gè)異步分頁(yè) $.getJSON('../../menu/page/1', { rows : 10 //每頁(yè)顯示的數(shù)據(jù)條數(shù) }, function (res) { //從第1頁(yè)開始請(qǐng)求。返回的json格式可以任意定義 laypage({ cont: 'page-nav', //容器。值支持id名、原生dom對(duì)象,jquery對(duì)象?!救缭撊萜鳛椤浚?lt;div id="page1"></div> pages: res.pageCount, //通過(guò)后臺(tái)拿到的總頁(yè)數(shù) curr: 1, //初始化當(dāng)前頁(yè) skin: '#5a98de',//皮膚顏色 groups: 5, //連續(xù)顯示分頁(yè)數(shù) skip: true, //是否開啟跳頁(yè) count:res.total, //數(shù)據(jù)總數(shù) limit: 10, //每頁(yè)顯示的條數(shù)。laypage將會(huì)借助 count 和 limit 計(jì)算出分頁(yè)數(shù) limits:[10, 20, 30, 40, 50], //每頁(yè)條數(shù)的選擇項(xiàng)。如果 layout 參數(shù)開啟了 limit,則會(huì)出現(xiàn)每頁(yè)條數(shù)的select選擇框 first: '首頁(yè)', //若不顯示,設(shè)置false即可 last: '尾頁(yè)', //若不顯示,設(shè)置false即可 prev: '上一頁(yè)', //若不顯示,設(shè)置false即可 next: '下一頁(yè)', //若不顯示,設(shè)置false即可 jump: function (e) { //觸發(fā)分頁(yè)后的回調(diào) $.getJSON('../../menu/page/' + e.curr, { rows : 10 //每頁(yè)顯示的數(shù)據(jù)條數(shù) }, function (res) { console.log(res.rows); var data = res.rows; $("#total-text").html(res.total); /*解析表格分頁(yè)數(shù)據(jù)*/ analysisTableData(data); }); } }); }); } </script>
4、效果圖
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中Form表單技術(shù)匯總(推薦)
這篇文章主要介紹了JavaScript中Form表單技術(shù)的相關(guān)資料,包括簡(jiǎn)單的表單驗(yàn)證和正則表達(dá)式驗(yàn)證,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JavaScript中的子窗口與父窗口的互相調(diào)用問(wèn)題
本文給大家介紹了JavaScript中的子窗口與父窗口的互相調(diào)用問(wèn)題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-02-02TypeScript聲明文件的語(yǔ)法與場(chǎng)景詳解
使用ts進(jìn)行開發(fā)的時(shí)候,不可避免的需要引用第三方的 JS 的庫(kù),但是默認(rèn)情況下TS是不認(rèn)識(shí)我們引入的這些JS庫(kù)的,所以在使用這些JS庫(kù)的時(shí)候,我們就要通過(guò)聲明文件告訴TS它是什么,這篇文章主要給大家介紹了關(guān)于TypeScript聲明文件的相關(guān)資料,需要的朋友可以參考下2022-05-05extjs圖表繪制之條形圖實(shí)現(xiàn)方法分析
這篇文章主要介紹了extjs圖表繪制之條形圖實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了extjs繪制條形圖的相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03JS動(dòng)態(tài)增加刪除UL節(jié)點(diǎn)LI及相關(guān)內(nèi)容示例
這篇文章主要介紹了JS如何動(dòng)態(tài)增加刪除UL節(jié)點(diǎn)LI及相關(guān)內(nèi)容,需要的朋友可以參考下2014-05-05