Layui如何实现在表格分页栏添加一个“跳转到顶部”按钮-Layui教程-PHP中文网

Layui表格分页栏默认无“跳转到顶部”按钮，因其laypage模块不提供原生扩展点；需在done或jump回调中动态插入DOM并用事件委托绑定scrollTop。

为什么 Layui 表格分页栏默认没有“跳转到顶部”按钮

layui 的 table 模块渲染分页时，只生成标准的上一页/下一页/页码按钮，laypage 本身也不提供自定义按钮扩展点。所谓“分页栏添加按钮”，本质是往分页容器 dom 中手动插入元素，并绑定滚动行为——不是配置项，而是 dom 操作 + 事件劫持。

如何在 laypage 渲染完成后插入按钮并绑定 scrollTop

关键时机是 done 回调（表格重载完成）或 jump 回调（laypage 自身渲染后），此时分页容器已存在且可操作。注意：不能在 init 阶段操作，DOM 还没生成。

用 layui.$('.layui-laypage').append(...) 向分页区域末尾追加按钮（推荐加在右上角，避免干扰原生控件）
按钮需带唯一 class（如 layui-btn-top），便于后续解绑或样式控制
点击事件必须用事件委托（layui.$(document).on('click', '.layui-btn-top', ...)），因为分页 DOM 会随翻页重建
触发 document.documentElement.scrollTop = 0 或 document.body.scrollTop = 0，兼容旧版浏览器

table.render({
  elem: '#demo',
  url: '/api/list',
  page: true,
  done: function(res, curr, count) {
    // 确保只插入一次，避免重复添加
    if (!layui.$('.layui-btn-top').length) {
      layui.$('.layui-laypage').append(
        '<button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-top">回到顶部</button>'
      );
      layui.$(document).on('click', '.layui-btn-top', function() {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
      });
    }
  }
});

为什么按钮可能失效或重复添加

常见原因有三个：一是 done 被多次触发（比如搜索重载、排序触发），导致按钮重复追加；二是未用事件委托，翻页后新 DOM 上的按钮无事件；三是 CSS 样式被 layui 默认样式覆盖（如 position: absolute 错位）。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

检查是否在 done 内部漏掉存在性判断（!layui.$('.layui-btn-top').length）
确认事件绑定写在 done 里，且使用 layui.$(document).on 而非直接 .click()
给按钮加 style="margin-left: 10px;" 或自定义 class 控制间距，避免和“下一页”挤在一起
如果表格启用了 height 并出现滚动条在表格内部（而非页面级），则应滚动 layui.$('.layui-table-box').scrollTop(0) 而非 document