html 表单数据自动分页,layui+nicePage.js实现JSON自动表格分页代码

很高兴回答你的问题！以下是使用 layui 和 nicePage.js 实现 JSON 自动表格分页的示例代码：

HTML 代码：

<div class="layui-container">
  <div class="layui-row">
    <table id="table" class="layui-table" lay-filter="table"></table>
  </div>
  <div id="page"></div>
</div>

JavaScript 代码：

layui.use(['table', 'laypage'], function () {
  var table = layui.table,
    laypage = layui.laypage;
  
  var data = [
    {id: 1, name: 'Tom', age: 20},
    {id: 2, name: 'Jerry', age: 18},
    {id: 3, name: 'Lucy', age: 22},
    {id: 4, name: 'John', age: 19},
    {id: 5, name: 'Lisa', age: 21},
    {id: 6, name: 'Bob', age: 23},
    // more data...
  ];

  var limit = 3; // 每页显示的数据量
  var currentPage = 1; // 当前页码

  function renderTable() {
    table.render({
      elem: '#table',
      data: data.slice((currentPage - 1) * limit, currentPage * limit),
      cols: [[
        {field: 'id', title: 'ID', width: 80},
        {field: 'name', title: '姓名', width: 120},
        {field: 'age', title: '年龄', width: 80},
      ]],
      page: false
    });
  }

  function renderPage() {
    laypage.render({
      elem: 'page',
      count: data.length,
      limit: limit,
      curr: currentPage,
      jump: function (obj, first) {
        if (!first) {
          currentPage = obj.curr;
          renderTable();
        }
      }
    });
  }

  renderTable();
  renderPage();
});

这里假设我们有一个 JSON 数据数组 `data`，每行包含 `id`、`name` 和 `age` 三个字段。我们使用 `slice` 方法根据当前页码和每页显示的数据量来分割数据数组，然后传入 `table.render` 方法中进行渲染。同时，我们使用 `laypage` 组件来渲染分页器，并在分页器的 `jump` 回调函数中更新当前页码并重新渲染表格。

注意，这里我们暂时设置了 `page: false`，即关闭了表格内置的分页功能。这是因为我们要使用 `nicePage.js` 来实现自动表格分页。在页面加载后，我们可以使用以下代码来自动给表格添加分页功能：

$('#table').nicePage({
  // options...
});

具体的 `options` 参数可以参考 `nicePage.js` 的文档。