layui数据表格分页刷新页面，并更新网址

最新推荐文章于 2024-09-06 09:05:47 发布

深蓝22

最新推荐文章于 2024-09-06 09:05:47 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签： layui javascript html

本文链接：https://blog.csdn.net/qq_25087307/article/details/120639411

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

博客讲述了在使用layui数据表格时遇到的点击分页无法刷新页面和更新URL的问题。作者通过百度搜索找到解决方案，即监听分页按钮点击事件，但此方法只能刷新页面。最终，作者通过修改layui的table.js源码，实现了分页切换时更新URL并正确加载对应页面数据。解决方案包括禁用table.render的内置分页，使用laypage.render进行自定义分页，并在table.js中调整分页逻辑。

摘要由CSDN通过智能技术生成

近期用到layui的数据表格，感觉非常好用。。

但是有一个问题，就是点击分页时不能刷新页面，也不能更新网址。

经过一番百度，有说到使用

$(".layui-laypage-btn").click()

来解决，但是这个方法，我只能刷新页面，但不能更新网址，不知道是我哪里做的不对？

最后自己思索出了解决方法：

1. 首先不要用table.render的分页

注意查看代码注释

table.render({
      elem: '#demo'
        , url: '...' 
        // , page: true                    / 此处不使用分页
        , currpage: getUrlParam('page')    // 获取url的当前页
        , limit: 15                        // 分页数量要和下面的分页配置一样
        , cols: [[ 
            { checkbox: true }
            , { field: 'id', title: '序号', width: 60 }
            }
        ]]
    });

2.使用laypage.render

laypage.render({
    elem: 'test1' 
    , curr: getUrlParam('page')    // 从网址获取当前页
    , limit: 15                    // 分页数量
    , jump: function (obj, first) {    
          if (!first) {
              window.location.href = '/code.html?page=' + obj.curr + '&limit=' + obj.limit
          }
      },
});

到这里为止，点击已经网址能切换，但是数据始终是第一页，这是因为table.js 将加载的page参数写4在第一页

3. 最后就是修改table.js ，将page改为当前页

1. 可以进入JS/HTML格式化 - 站长工具格式化table.js

2. 在104行加上 i.page()

F = function(e) {
        var i = this;
        i.index = ++d.index,
        i.config = t.extend({},
        i.config, d.config, e),
        i.render();
        i.page()   // 加加加
    };

3. 在338行将 F.prototype.page 默认的1 改为当前网址的当前页即可

// F.prototype.page = 1;
    F.prototype.page = function(){
        var page = getUrlParam('page') ? getUrlParam('page') : 1;
        return page;
    },

最后附上getUrlParam方法

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r != null) return decodeURI(r[2]); return null; 
}