layui（三）——laypage组件常见⽤法总结laypage 的使⽤⾮常简单，指向⼀个⽤于存放分页的容器，通过服务端得到⼀些初始值，即可完成分页渲染。
核⼼⽅法： laypage.render(options) 来设置基础参数。
⼀、laypage的常⽤基础参数e(['laypage'], function () {laypage = ypagelaypage.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 somethingif (!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>e(['laypage'], function () {var laypage = ypage, layer = yer;//---------------------------点击侧边类型，加载新闻列表$('#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>。
