layui.laypage
2018-02-06 16:41
190 查看
<!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="css/layui.css" media="all"> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>开门见山 : 默认分页</legend> </fieldset> <div id="demo1"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>自定义主题 : 赤橙黄绿青蓝紫 神马的,随便设:-O</legend> </fieldset> <div id="demo2"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>自定义文本 : 上一页、下一页、首页、末页统统被替换</legend> </fieldset> <div id="demo3"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>不显示首页、末页</legend> </fieldset> <div id="demo4"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>开启 URL hash</legend> </fieldset> <div id="demo5"></div> <blockquote class="layui-elem-quote"> 切换分页后看地址栏的变化(#后面的fenye名字可以随便定义),该功能对于单页应用有着极大的帮助 </blockquote> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>只显示上一页、下一页</legend> </fieldset> <div id="demo6"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>是时候看一下完整功能了!</legend> </fieldset> <div id="demo7"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>将一段已知数组分页展示</legend> </fieldset> <div id="demo8"></div> <ul id="biuuu_city_list"></ul> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="layui.js" charset="utf-8"></script> <script> layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; laypage({ cont: 'demo1' //容器,值可以传入元素id或者原生DOM或jquery对象,如:cont:'id' //cont:document.getElementById('id'); cont:$('#id'); ,pages: 100 //总页数 ,groups: 5 //连续显示分页数 }); laypage({ cont: 'demo2' ,pages: 100 ,skin: '#1E9FFF' //控制分页皮肤 }); laypage({ cont: 'demo3' ,pages: 100 ,first: 1 //控制首页,值支持三种类型,如:first:'首页' first:false则表示不显示首页项 ,last: 100 //控制尾页,值支持三种类型,如:last:'尾页' last:false则表示不显示尾页项 ,prev: '<em><</em>' ,next: '<em>></em>' }); laypage({ cont: 'demo4' ,pages: 100 ,first: false ,last: false }); laypage({ cont: 'demo5' ,pages: 100 ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页 ,hash: 'fenye' //自定义hash值 }); laypage({ cont: 'demo6' ,pages: 5 ,groups: 0 ,first: false ,last: false ,jump: function(obj, first){ if(!first){ layer.msg('第 '+ obj.curr +' 页'); } } }); laypage({ cont: 'demo7' ,pages: 100 ,skip: true }); //将一段数组分页展示 //测试数据 var data = [ '北京','上海','广州','深圳', '杭州','长沙','合肥','徐州', '宁夏','成都','西安','南昌', '上饶','沈阳','济南','厦门', '福州','九江','宜春','赣州', '宁波','绍兴','无锡','苏州', '东莞','佛山','中山','澳门', '成都','武汉','青岛','天津', '重庆','南京','九江','香港' ]; var nums = 5; //每页出现的数据量 //模拟渲染 var render = function(curr){ //此处只是演示,实际场景通常是返回已经当前页已经分组好的数据 var str = '', last = curr*nums - 1; last = last >= data.length ? (data.length-1) : last; for(var i = (curr*nums - nums); i <= last; i++){ str += '<li>'+ data[i] +'</li>'; } return str; }; //调用分页 laypage({ cont: 'demo8' ,pages: Math.ceil(data.length/nums) //得到总页数 ,jump: function(obj){ document.getElementById('biuuu_city_list').innerHTML = render(obj.curr); } }); }); </script> </body> </html>
相关文章推荐
- layUI框架--laypage+SpringMVC实现后端分页
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
- 使用layui中的laypage遇到的各种问题总结
- layui分页组件layPage动态调整总页数
- layui-laydate 时间大小控制
- laypage同一页面加入多处分页实现
- js多功能分页组件layPage使用方法详解
- Jquery+artTemplate+layPage 封装datagrid
- layPage 多功能的js分页组件
- Layui中的日期组件layDate 1.1的改良版
- ThinkPHP结合laypage实现ajax分页
- JS:layPage:一款多功能的js分页组件
- Spring+SpringMVC+Mybatis+PageHelper+laypage+Ajax实现的分页
- layUI独立组件layer-laydate-laypage项目实践用法
- jfinal结合layPage进行分页查询操作
- layui结合mybatis的pagehelper插件的分页通用的方法
- php 经典分页(推荐和laypage配合)
- layui的laydate实现季度选择
- layui 日期插件layDate 绑定 动态添加 增加多个 行内调用 js代码调用
- thinkPHP5 使用laypage分页插件实现列表分页功能