学习使用layPage, 多功能JS分页组件/插件的方法
- 效果图
- 分页代码
效果图
点击查看链接
分页代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="../res/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/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});//开启HASHlaypage.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', 'refresh', '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>
