layui分頁組件layPage動態調整頁數

今天來說一說，laypage如何動態調整頁數。

首先，這是簡單的分頁組件的寫法，這時候始終都只有一頁。

layui.use(['laypage', 'layer'], function(){ laypage = layui.laypage ,layer = layui.layer; laypage.render({ elem: 'demo2'    //渲染的對象
        ,count: 1    //注意這里的count是數據條數
        ,limit: 8    //每頁顯示8條數據
        ,theme: '#1E9FFF' }); });

對其進行方法封裝。

16是每頁顯示的個數，num是你要查詢的表里面的總數據

function flushPage(num,curr){ layui.use(['laypage', 'layer'], function(){ laypage = layui.laypage ,layer = layui.layer; laypage.render({ elem: 'demo2'    //渲染的對象
        ,count: num    //注意這里的count是數據條數
        ,limit: 16        //每頁顯示8條數據
        ,curr : curr    //當前高亮頁
        ,theme: '#1E9FFF' ,jump: function (obj, first) { //obj為當前頁的屬性和方法，第一次加載first為true
            //do SomeThing
            if (!first) {    //非首次加載
 console.log(obj.curr); getSongByPage(obj.curr); //執行跳頁方法，刷新顯示內容，然后再在跳頁方法中調用該方法，來改變總頁數
                //注意這里的總頁數是，layui自己給我們算出來的，我們需要提供后台返回的總記錄數，以及一頁顯示記錄條數
 } } }); }); }

頁面刷新 與 從后端獲取總記錄數的方法

function getSongByPage(page) { if (page <= 0) { page = 1; } sql_page = (page - 1) * 16; $.ajax({ url: "/look_poem_desty", type: "POST", data: {"desty": $("#desty_name").val(), "page": sql_page}, dataType: "json", async: true, success: function (res) { text = ""; total_sum = res[0].sum; //text渲染就不寫了。。。。
                var songNum = total_sum;        //取出總記錄數
 flushPage(songNum, page); $("#all_shici").html(text); }, error: function (e) { alert("出現錯誤！！"); } }); } 

所有完畢后，就可以去寫后端的mysql語句：

select * from tang limit page,16;

然后加載：即可實現分頁

getSongByPage(1);

相信你看完就會了。。。。。