layui中laypage組件如何使用

這篇文章給大家介紹layui中laypage組件如何使用，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

一、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><h3 id="newsType">新聞分類1</h3> <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中laypage組件如何使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。