Layui Data Pagination: Implementation Guide

To implement data pagination in Layui, you can use the table component in combination with the laypage component. Here is a simple example code:

1. HTML code:

<table id="demo" lay-filter="test"></table>
<div id="page"></div>

1. JavaScript code:

layui.use(['table', 'laypage'], function(){
  var table = layui.table;
  var laypage = layui.laypage;
  
  // 渲染表格
  table.render({
    elem: '#demo',
    url: '/api/data', // 数据接口
    page: true, // 开启分页
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'}
    ]]
  });
  
  // 监听表格行点击事件
  table.on('row(test)', function(obj){
    console.log(obj.data);
  });
  
  // 分页
  laypage.render({
    elem: 'page',
    count: 100, // 数据总数
    limit: 10, // 每页显示条数
    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
    jump: function(obj, first){
      if(!first){
        // 执行分页
        // 如重新渲染表格等操作
      }
    }
  });
});

In the code above, we first use the table and laypage modules of Layui, then render the table using the table.render method and set page to true to enable pagination. Next, we render the pagination component using the laypage.render method and implement pagination operations in the jump callback function.

It’s important to note that when rendering tables and navigating through pages, you need to call the appropriate interfaces to retrieve data or re-render the table based on the actual situation.