190 lines
3.7 KiB
HTML
190 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>分页 - layui</title>
|
||
|
||
<link rel="stylesheet" href="../src/css/layui.css">
|
||
|
||
<style>
|
||
body{padding: 10px;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
总页数低于页码总数：<div id="demo0"></div>
|
||
总页数大于页码总数：<div id="demo1"></div>
|
||
自定义主题：<div id="demo2"></div>
|
||
自定义首页、尾页、上一页、下一页文本：<div id="demo3"></div>
|
||
不显示首页尾页：<div id="demo4"></div>
|
||
开启HASH：<div id="demo5"></div>
|
||
只显示上一页、下一页：<div id="demo6"></div>
|
||
显示完整功能：<div id="demo7"></div>
|
||
自定义排版：<div id="demo8"></div>
|
||
|
||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
|
||
<legend>将一段已知数组分页展示</legend>
|
||
</fieldset>
|
||
|
||
<div id="demo9"></div>
|
||
|
||
<ul id="biuuu_city_list"></ul>
|
||
|
||
|
||
<script src="../src/layui.js"></script>
|
||
<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: '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
|
||
//,groups: 0
|
||
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip', ]
|
||
,jump: function(obj){
|
||
console.log(obj)
|
||
}
|
||
});
|
||
|
||
//自定义排版
|
||
laypage.render({
|
||
elem: 'demo8'
|
||
,count: 1000
|
||
,layout: ['limit', 'prev', 'page', 'next']
|
||
//,limits: [100, 200, 300]
|
||
,limit: 200
|
||
});
|
||
|
||
|
||
|
||
//将一段数组分页展示
|
||
|
||
//测试数据
|
||
var data = [
|
||
'北京',
|
||
'上海',
|
||
'广州',
|
||
'深圳',
|
||
'杭州',
|
||
'长沙',
|
||
'合肥',
|
||
'宁夏',
|
||
'成都',
|
||
'西安',
|
||
'南昌',
|
||
'上饶',
|
||
'沈阳',
|
||
'济南',
|
||
'厦门',
|
||
'福州',
|
||
'九江',
|
||
'宜春',
|
||
'赣州',
|
||
'宁波',
|
||
'绍兴',
|
||
'无锡',
|
||
'苏州',
|
||
'徐州',
|
||
'东莞',
|
||
'佛山',
|
||
'中山',
|
||
'成都',
|
||
'武汉',
|
||
'青岛',
|
||
'天津',
|
||
'重庆',
|
||
'南京',
|
||
'九江',
|
||
'香港',
|
||
'澳门',
|
||
'台北'
|
||
];
|
||
|
||
//调用分页
|
||
laypage.render({
|
||
elem: 'demo9'
|
||
,count: data.length
|
||
,layout: ['prev', 'page', 'next', 'refresh', 'skip']
|
||
,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>
|