layUI关于table组件如何设置分页跳转后的页面锚点

场景描述

今天接到的需求是让所有分页器分页跳转时，页面锚点定位到指定位置。项目是用layui写的前端，然后在看项目代码时发现，代码中的分页器有些是直接用table组件，设置page:true开启分页；有些则是用的laypage组件。对于后者的情况很简单，就是在jump配置项里去写回调函数的逻辑即可，但是前者就有点麻烦，这是因为虽然table的page配置项支持传入一些laypage组件的属性，但并不支持传入jump。

问题解决

考虑过两种解决方法：
1.把table组件里的page直接改成用laypage组件去写，然后再在jump里改。
但是这种方法太麻烦，代码量多的情况下涉及的改动也就特别多，加上前端很多页面都用到了带分页的table，这样要重新写的地方很多。
2.利用table组件的done/before配置项。
仔细看layui文档会发现，它有两个回调函数配置项：
鉴于需求是在数据渲染之前就让页面锚点跳转，因此我需要在before函数里去书写跳转逻辑。
但是问题又来了，页面初始渲染时，我当然不希望此时的锚点就会跳转到表头（因为在表格部分之前还有其余页面内容）。
而文档对于before函数里的参数又没有描述，因此这个时候我们可以去打印一下before函数的arguments。

//页面初始渲染时的打印结果：
arguments {
  "0": {
    "limit": 10,
    "loading": true,
    "escape": true,
    "cellMinWidth": 60,
    "cellMaxWidth": 1.7976931348623157e+308,
    "editTrigger": "click",
    "defaultToolbar": [],
    "defaultContextmenu": true,
    "autoSort": true,
    "text": {
      "none": "无数据"
    },
    "cols": [
      ....
      //这里是表头数据
    ],
    "checkName": "LAY_CHECKED",
    "indexName": "LAY_INDEX",
    "numbersName": "LAY_NUM",
    "disabledName": "LAY_DISABLED",
    "elem": {
      "0": {},
      "length": 1,
      "context": {
        "location": {
          "ancestorOrigins": {},
          "href": "...",
          "origin": "...",
          "protocol": "http:",
          "host": "...",
          "hostname": "",
          "port": "",
          "pathname": "/",
          "search": "",
          "hash": ""
        },
        "jQuery1124042153479686134987": 2
      },
      "selector": "#talent_table"
    },
    "url": "/api/plan",
    "request": {
      "pageName": "page",
      "limitName": "limit"
    },
    "response": {
      "statusName": "code",
      "statusCode": 1000,
      "msgName": "msg",
      "dataName": "data",
      "totalRowName": "totalRow",
      "countName": "count"
    },
    "page": true,
    "width": 1200,
    "toolbar": "#toolbar",
    "where": {
      "year": 2023,
      "degree": 3
    },
    "id": "talent_table",
    "index": 1,
    "clientWidth": 1200
  }
}

切换页码之后再打印一次arguments，会发现其余项基本没有变动，但page项从true变成了一个对象：

    "page": {
      "elem": "layui-table-page1",
      "count": 总条数,
      "limit": 每页显示条数,
      "limits": [10, 20, 30, 40, 50, 60, 70, 80, 90],
      "groups": 3,
      "layout": ["prev", "page", "next", "skip", "count", "limit"],
      "prev": "<i class=\"layui-icon\">&#xe603;</i>",
      "next": "<i class=\"layui-icon\">&#xe602;</i>",
      "index": 1,
      "curr": 当前页码,
      "pages": 总页数
    },

因此可以利用这一点去做一些判断，从而书写我们需要的锚点逻辑。

before: function () {
//如果是对象，说明已经切换过页码了
 if (typeof arguments[0].page === 'object') {
	//这部分是因为有顶部固定导航栏，因此要减去这部分
   let headerHeight = document.querySelector('.header-content').offsetHeight
   let offsetTop = document.querySelector('#pageScroll').offsetTop - headerHeight
   window.scrollTo({
     top: offsetTop,
     behavior: "instant"//立即跳转
   })
 }
},