[Layui] table 和 laypage 组合

要更新表格数据，通过 table 的 reload 方法。reload 可以重新渲染表格，并更新其数据。

<body>
  <table class="layui-hide" id="demo-table"></table>
  <div id="demo-laypage"></div>

  <script>
    layui.use(["table", "laypage"], function () {
      const table = layui.table;
      const laypage = layui.laypage;

      const tableInst = table.render({
        elem: "#demo-table",
        cols: [
          [
            { field: "id", title: "ID" },
            { field: "username", title: "用户" },
            { field: "sign", title: "签名" },
            { field: "sex", title: "性别" },
            { field: "city", title: "城市" },
            { field: "experience", title: "积分" },
          ],
        ],
      });

      laypage.render({
        elem: "demo-laypage",
        count: data.length,
        jump: function (obj) {
          const start = obj.curr * obj.limit - obj.limit;
          const end = start + obj.limit;

          tableInst.reload({
            data: data.slice(start, end),
          });
        },
      });
    });
  </script>
</body>
posted @ 2024-09-09 14:49  Himmelbleu  阅读(3)  评论(0)  编辑  收藏  举报