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

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