我的小工程的前端使用了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. laypage如何动态改变页码
2. layPage官网
