在Layui中,可以通过table组件和laypage组件来实现分页向后端查询数据的功能。以下是一个简单的示例代码:

HTML代码:

<div class="layui-form">
  <table id="data-table" lay-filter="data-table"></table>
  <div id="data-page" class="layui-table-page"></div>
</div>

JavaScript代码:

layui.use(['table', 'laypage'], function() {
  var table = layui.table;
  var laypage = layui.laypage;
  
  // 渲染表格
  table.render({
    elem: '#data-table',
    url: '/api/data', // 后端接口地址
    page: true,
    cols: [[
      // 表格列配置
      // ...
    ]],
    parseData: function(res) {
      // 解析后端返回的数据
      return {
        code: res.code,
        msg: res.msg,
        count: res.data.total,
        data: res.data.list
      };
    }
  });

  // 监听分页事件
  laypage.render({
    elem: 'data-page',
    layout: ['prev', 'page', 'next', 'skip'],
    jump: function(obj, first) {
      // 首次加载时不执行
      if (!first) {
        // 重新加载表格数据
        table.reload('data-table', {
          page: {
            curr: obj.curr
          }
        });
      }
    }
  });
});

上述代码中,table.render方法用于渲染表格,并通过url参数指定了后端接口地址。parseData函数用于解析后端返回的数据,将其转换为Layui表格组件所需的格式。

laypage.render方法用于渲染分页组件,并通过jump回调函数监听分页事件。在回调函数中,判断是否首次加载,如果不是首次加载,则重新加载表格数据,通过table.reload方法传入当前页码,实现向后端查询对应页码的数据。

需要根据实际情况修改接口地址、表格列配置等参数

layui实现分页向后端查询数据

原文地址: http://www.cveoy.top/t/topic/h1lp 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录