laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。核心方法： laypage.render(options) 来设置基础参数。
一、laypage的常用基础参数
layui.use([\'laypage\'], function () { laypage = layui.laypage laypage.render({ elem: \'pageTest\' //这是元素的id，不能写成"#pageTest" , count: data.length //数据总数 , limit: 10 //每页显示条数 , limits: [10, 20, 30] , curr: 1 //起始页 , groups: 5 //连续页码个数 , prev: \'上一页\' //上一页文本 , netx: \'下一页\' //下一页文本 , first: 1 //首页文本 , last: 100 //尾页文本 , layout: [\'prev\', \'page\', \'next\',\'limit\',\'refresh\',\'skip\'] //跳转页码时调用 , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true // do something if (!first) { //非首次加载 do something } } }) });
二、使用方式
在layui中的table中包含了laypage，这里就不再说明laytable中的分页用法，主要写一个后台分页，前端加载列表（非table中的列表）的栗子，具体为点击分类栏，主体部分显示对应的新闻列表。
<div class="category">
<ul id="newsTypeList">
<li class="hover" id="hyzxNews" data-typeId="1">新闻分类1</li>
<li data-typeId="2">新闻分类2</li>
<li data-typeId="3">新闻分类3</li>
<li data-typeId="4">新闻分类4</li>
</ul>
</div>
<h2 id="newsType">新闻分类1</h2>
<div class="list_box">
<ul id="newsList" class="list_ul"></ul>
<div id="demo7" style="text-align:center"></div>
</div>
<script> layui.use([\'laypage\'], function () { var laypage = layui.laypage , layer = layui.layer; //---------------------------点击侧边类型，加载新闻列表 $(\'#newsTypeList li\').click(function () { var typeId = $(this).attr("data-typeId"); $.post(\'/News/GetNewsByPage\', { page: 1, limit: 3, typeId: typeId }, function (result) { res = result.data; setHtml(res); setStyle(typeId) pages(result.count, typeId)//切换分类时候，调用页码，重新渲染 }); }).eq(0).click(); //--------------------------------分页组件渲染 function pages(count, typeId) { laypage.render({ elem: \'demo7\' , count: count , theme: \'#4A90E2\' , layout: [\'prev\', \'page\', \'next\'] , limit: 3 , jump: function (obj, first) { if (!first) { $.post(\'/News/GetNewsByPage\'
, { page: obj.curr, limit: obj.limit, typeId: typeId }
, function (result) { res = result.data; setHtml(res); }); } } }) } //--------------------------------写入后台内容 function setHtml(data) { var strHtml = ""; $.each(data, function (index, item) { strHtml += (\'<li>${item.Title}</li>\'); }); document.getElementById(\'newsList\').innerHTML = strHtml; } //--------------------------------改变样式 function setStyle(typeId) { $(\'ul.newsTypeList li\').removeClass(\'hover\'); $(\'ul.newsTypeList li[data-typeId=\' + typeId + \']\').addClass(\'hover\'); $(\'#newsType\').text($(\'ul#newsTypeList li[data-typeId=\' + typeId + \']\').text()) } }); </script>
注:这是为了个人查找方便整理的文档，并没有总结完全，查看更多可访问官网http://www.layui.com/doc