layui分页效果实现代码

2019-11-19 16:32:59

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了layui分页效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>分页</title>  <link rel="stylesheet" href="layui/css/layui.css" > </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>开启 URL hash</legend>  </fieldset>  <div id="demo5"></div>  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">   <legend>是时候看一下完整功能了！</legend>  </fieldset>  <div id="demo7"></div>  <script src="layui/layui.js"></script>  <script>   layui.use(['laypage', 'layer'], function(){    var laypage = layui.laypage    ,layer = layui.layer;    laypage({     cont: 'demo1'     ,pages: 100 //总页数     ,groups: 5 //连续显示分页数    });    laypage({     cont: 'demo5'     ,pages: 100     ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页     ,hash: 'fenye' //自定义hash值    });    laypage({     cont: 'demo7'     ,pages: 100     ,skip: true    });   });  </script> </body></html>

效果图：