layui分页组件layPage动态调整总页数

我的小工程的前端使用了layui,这也是当时临时上网查到的一个框架,感觉风格简约,而且据称对后端开发人员很友好.
在使用layui的过程中,我遇到了一些问题,在这里将几个个人感觉比较棘手的问题列举一下.

layui的laypage组件如何动态修改总页数

layui的laypage曾是一个单独的第三方组组件,后来被作者一起整合如layui中,laypage实现了一个功能完全,界面好看的分页栏,但是从配置laypage的函数来看,laypage的分页总页数是在前端固定的.那么面对删除当前分页的数据后分页总页数变化的要求,laypage原本的配置是不够用的.那么,怎么办?
在layui的社区内,在laypage单独组件的介绍中,其实已有解决方法,不过并没有相关解释,我在这里做一些解释说明.

首先,我们把简单的分页组件的写法写出来

layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage,layer = layui.layer;
    laypage({
        cont:'page',//容器。值可以传入元素id或原生DOM或jquery对象
        pages:$('#page-count').val(),//放在隐藏input内的总页数
        jump:function(obj) {//点击页数按钮触发的函数
            var curr = obj.curr;//得到点击的页数
            //异步取得数据,作更新页面操作
            $.get("getContent?page="+curr
                ,function(data){
                    //渲染数据
            });
        }
    });
});

可以看到,这里面,pages是预先得到的,如果页面不刷新,这个值也不会变,也就是说,如果在当前页面删除了若干条数据,以至于分页总页数改变,在刷新之前,laypage也不会修改总页数,这就会导致,等删除完了数据,跳转到最后一页,发现最后一页是空的,甚至倒数第二页也是空的.如何修改代码以避免这样问题呢?

使用如下方式:

function flushPage(page){
    var pageNum;
    $.get("getPageNum",function(data){
        pageNum=data;
    });
    $.get("getContent?page="+page,function(data){
        //渲染数据
    });
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
        ,layer = layui.layer;
        laypage({
            cont:'page',//容器。值可以传入元素id或原生DOM或jquery对象
            pages:pageNum,//把新的页数写入
            jump:function(obj) {//点击页数按钮触发的函数
                var curr = obj.curr;//得到点击的页数
                flushPage(curr);
            }
        });
    });
}

这样,每一地点击页码,其实都会重新从后台异步获取一次新的总页数,然后重新用laypage包装一遍分页栏,这样laypage总页数不能更新的问题就解决了,但是还有些小遗憾,比如现在已经显示出了最后一页的页码,但是删除了若干项后,最后一页已经空了,这个时候其实还是可以跳到最后一页的,只是跳过去之后,laypage才会重新包装分页栏.对于这样情况,也许需要删除的时候就触发flushPage函数,不过这样也许又有性能问题.

参考来源:
1.
2.