layui laypage组件常见用法总结

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>

更多layui知识请关注layui使用教程栏目。

以上就是layui laypage组件常见用法总结的详细内容，更多内容请关注技术你好其它相关文章！