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);

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