温馨提示×

layui怎么实现数据分页功能

小亿
128
2024-02-20 09:45:43
栏目: 编程语言

在Layui中实现数据分页功能可以使用Layui的table组件配合Layui的laypage组件来实现。以下是一个简单的示例代码:

  1. HTML代码:
<table id="demo" lay-filter="test"></table>
<div id="page"></div>
  1. JavaScript代码:
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){
        // 执行分页
        // 如重新渲染表格等操作
      }
    }
  });
});

在上面的代码中,我们首先使用Layui的table和laypage模块,然后通过table.render方法渲染表格,并设置page为true来开启分页功能。接着通过laypage.render方法来渲染分页组件,并在jump回调函数中实现分页操作。

需要注意的是,在表格渲染和分页跳转时需要根据实际情况调用相应的接口来获取数据或重新渲染表格。

0