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高級(jí)程序設(shè)計(jì)第二版第十二章事件要點(diǎn)總結(jié)(常用的跨瀏覽器檢測(cè)方法)
javascript高級(jí)程序設(shè)計(jì)第二版第十二章事件要點(diǎn)總結(jié)(常用的跨瀏覽器檢測(cè)方法),需要的朋友可以參考下2012-08-08
有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05
JavaScript中日期格式化的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了JavaScript中日期格式化的一些實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
javascript實(shí)現(xiàn)table單元格點(diǎn)擊展開隱藏效果(實(shí)例代碼)
這篇文章主要介紹了javascript實(shí)現(xiàn)table單元格點(diǎn)擊展開隱藏效果的實(shí)例代碼講解,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-04-04
標(biāo)題過(guò)長(zhǎng)使用javascript按字節(jié)截取字符串
在網(wǎng)頁(yè)展示中經(jīng)常會(huì)碰到,標(biāo)題過(guò)長(zhǎng),需要截取字符串,用CSS的實(shí)現(xiàn)的話各種兼容問(wèn)題,下面為大家介紹下javascript如何按字節(jié)截取字符串2014-04-04
通過(guò)滑動(dòng)翻頁(yè)效果實(shí)現(xiàn)和移動(dòng)端click事件問(wèn)題
這篇文章主要介紹了滑動(dòng)翻頁(yè)效果實(shí)現(xiàn)和移動(dòng)端click事件問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01
jscript之Open an Excel Spreadsheet
jscript之Open an Excel Spreadsheet...2007-06-06

