Summary of common usage of layui laypage component

The use of laypage is very simple. It points to a container used to store paging, and gets some initial values ​​​​through the server to complete paging rendering. Core method: laypage.render(options) to set basic parameters.

1. Commonly used basic parameters of 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  
                    }
                }
            })
        });

2. How to use

Included in the table in layui Laypage, here I will not explain the usage of paging in laytable. I will mainly write an example of background paging and front-end loading of lists (not lists in the table). Specifically, click on the category bar, and the main part will display the corresponding news list.

<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([&#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}</li>&#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>

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Summary of common usage of layui laypage component. For more information, please follow other related articles on the PHP Chinese website!