PHP前端开发

layui laypage组件常见用法总结

百变鹏仔 1个月前 (11-16) #layui
文章标签 组件

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>                    <ul>                        <li>新闻分类1</li>                        <li>新闻分类2</li>                        <li>新闻分类3</li>                        <li>新闻分类4</li>                    </ul>                </div><h2>新闻分类1</h2> <div>                    <ul></ul>                    <div></div>                </div><script>    layui.use([&#39;laypage&#39;], function () {        var laypage = layui.laypage            , layer = layui.layer;//---------------------------点击侧边类型,加载新闻列表        $(&#39;#newsTypeList li&#39;).click(function () {            var typeId = $(this).attr("data-typeId");            $.post(&#39;/News/GetNewsByPage&#39;, { 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: &#39;demo7&#39;                , count: count                , theme: &#39;#4A90E2&#39;                , layout: [&#39;prev&#39;, &#39;page&#39;, &#39;next&#39;]                , limit: 3                , jump: function (obj, first) {                    if (!first) {                        $.post(&#39;/News/GetNewsByPage&#39;, { 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 += (&#39;<li>${item.Title}&#39;);            });            document.getElementById(&#39;newsList&#39;).innerHTML = strHtml;        }//--------------------------------改变样式        function setStyle(typeId) {            $(&#39;ul.newsTypeList li&#39;).removeClass(&#39;hover&#39;);            $(&#39;ul.newsTypeList li[data-typeId=&#39; + typeId + &#39;]&#39;).addClass(&#39;hover&#39;);            $(&#39;#newsType&#39;).text($(&#39;ul#newsTypeList li[data-typeId=&#39; + typeId + &#39;]&#39;).text())        }    });</script>

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