有文檔的?
/demo/laypage.html
<!DOCTYPE?html><html>
<head>
<meta?charset="utf-8"> <title>layui</title> <meta?name="renderer"?content="webkit"> <meta?/layui/dist/css/layui.css"?media="all"> <!--?註意：如果妳直接復制所有代碼到本地，上述css路徑需要改成妳本地的?--></head>
<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>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>自定義主題?-?顏色隨意定義</legend></fieldset>
<div?id="demo2"></div>
<div?id="demo2-1"></div>
<div?id="demo2-2"></div>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>自定義首頁、尾頁、上壹頁、下壹頁文本</legend></fieldset>
<div?id="demo3"></div>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>不顯示首頁尾頁</legend></fieldset>
<div?id="demo4"></div>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>開啟HASH</legend></fieldset>
<div?id="demo5"></div>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>只顯示上壹頁、下壹頁</legend></fieldset>
<div?id="demo6"></div>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>顯示完整功能</legend></fieldset>
<div?id="demo7"></div>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>自定義排版</legend></fieldset>
<div?id="demo8"></div>
<div?id="demo9"></div>
<div?id="demo10"></div>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>自定義每頁條數的選擇項</legend></fieldset>
<div?id="demo11"></div>
<fieldset?class="layui-elem-field?layui-field-title"?style="margin-top:?30px;">
<legend>將壹段已知數組分頁展示</legend></fieldset>
<div?id="demo20"></div>
<ul?id="biuuu_city_list"></ul>?
<script?src="//res.layui.com/layui/dist/layui.js"?charset="utf-8"></script>
<!--?註意：如果妳直接復制所有代碼到本地，上述js路徑需要改成妳本地的?-->
<script>
layui.use(['laypage',?'layer'],?function(){
var?laypage?=?layui.laypage ,layer?=?layui.layer; //總頁數低於頁碼總數 laypage.render({elem:?'demo0'
,count:?50?//數據總數
}); //總頁數大於頁碼總數 laypage.render({elem:?'demo1'
,count:?70?//數據總數
,jump:?function(obj){
console.log(obj)}
}); //自定義樣式 laypage.render({elem:?'demo2'
,count:?100
,theme:?'#1E9FFF'
}); laypage.render({elem:?'demo2-1'
,count:?100
,theme:?'#FF5722'
}); laypage.render({elem:?'demo2-2'
,count:?100
,theme:?'#FFB800'
}); //自定義首頁、尾頁、上壹頁、下壹頁文本 laypage.render({elem:?'demo3'
,count:?100
,first:?'首頁'
,last:?'尾頁'
,prev:?'<em>←</em>'
,next:?'<em>→</em>'
}); //不顯示首頁尾頁 laypage.render({elem:?'demo4'
,count:?100
,first:?false
,last:?false
}); //開啟HASH laypage.render({elem:?'demo5'
,count:?500
,curr:?location.hash.replace('#!fenye=',?'')?//獲取hash值為fenye的當前頁
,hash:?'fenye'?//自定義hash值
}); //只顯示上壹頁、下壹頁 laypage.render({elem:?'demo6'
,count:?50
,layout:?['prev',?'next']
,jump:?function(obj,?first){
if(!first){layer.msg('第?'+?obj.curr?+'?頁');
}}
}); //完整功能 laypage.render({elem:?'demo7'
,count:?100
,layout:?['count',?'prev',?'page',?'next',?'limit',?'skip']
,jump:?function(obj){
console.log(obj)}
}); //自定義排版 laypage.render({elem:?'demo8'
,count:?1000
,layout:?['limit',?'prev',?'page',?'next']
}); laypage.render({elem:?'demo9'
,count:?1000
,layout:?['prev',?'next',?'page']
}); laypage.render({elem:?'demo10'
,count:?1000
,layout:?['page',?'count']
}); //自定義每頁條數的選擇項 laypage.render({elem:?'demo11'
,count:?1000
,limit:?100
,limits:?[100,?300,?500]
}); //將壹段數組分頁展示 //測試數據 var?data?=?['北京',
'上海',
'廣州',
'深圳',
'杭州',
'長沙',
'合肥',
'寧夏',
'成都',
'西安',
'南昌',
'上饒',
'沈陽',
'濟南',
'廈門',
'福州',
'九江',
'宜春',
'贛州',
'寧波',
'紹興',
'無錫',
'蘇州',
'徐州',
'東莞',
'佛山',
'中山',
'成都',
'武漢',
'青島',
'天津',
'重慶',
'南京',
'九江',
'香港',
'澳門',
'臺北'
]; //調用分頁 laypage.render({elem:?'demo20'
,count:?data.length
,jump:?function(obj){
//模擬渲染 document.getElementById('biuuu_city_list').innerHTML?=?function(){var?arr?=?[]
,thisData?=?data.concat().splice(obj.curr*obj.limit?-?obj.limit,?obj.limit);
layui.each(thisData,?function(index,?item){
arr.push('<li>'+?item?+'</li>');});
return?arr.join('');
}();}
});});
</script>
</body>
</html>