第一步引用兩個文件:
<link href="layui-v2.2.5/layui-v2.2.5/layui/css/layui.css" rel="stylesheet" media="all" />
<!-- 注意：如果你直接復制所有代碼到本地，上述css路徑需要改成你本地的 -->
<script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>
<!-- 注意：如果你直接復制所有代碼到本地，上述js路徑需要改成你本地的 -->
第二步寫一個div id名為demo0（根據自己自定義）
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>總頁數低於頁碼總數</legend>
</fieldset>
<div id="demo0"></div> //第一種
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>總頁數大於頁碼總數</legend>
</fieldset>
<div id="demo1"></div> //第二種
</body>
第三步寫腳本:
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//第一種 總頁數低於頁碼總數
laypage.render({
elem: 'demo0'
, count: 50 //數據總條數(根據實際情況獲取)
, jump: function (obj) {
alert(obj.curr); //獲得當前頁碼
}
});
//第二種 總頁數大於頁碼總數
laypage.render({
elem: 'demo1'
,count: 70 //數據總條數(根據實際情況獲取)
,jump: function(obj){
alert(obj.curr); //獲得當前頁碼
}
});
})
下面最完整的分頁，了解就行
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage
, layer = layui.layer;
var $ = layui.$;
var total_page = $("#total_page").val();
laypage.render({
elem: 'demo1'
, limit: 1
, count: 50
, curr: function () { //通過url獲取當前頁，也可以同上（pages）方式獲取
var page = location.search.match(/page=(\d+)/);
return page ? page[1] : 1;
}()
, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, jump: function (obj, first) {
//obj包含了當前分頁的所有參數，比如：
alert(obj.curr) //獲得當前頁
//console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的數據。
//console.log(obj.limit); //得到每頁顯示的條數
//首次不執行
if (!first) {
window.location.href = "?page=" + obj.curr;
}
}
});
});
</script>