layui table 自定义分页参数

在 layui table 中，可以通过设置 limit 和 curr 参数来实现自定义分页。limit 表示每页显示的数据条数，curr 表示当前页码。

例如，设置每页显示 10 条数据，当前页码为 2，可以这样写：

table.render({
  elem: '#test',
  url: '/demo/table/user/',
  limit: 10, // 每页显示的数据条数
  page: {
    curr: 2 // 当前页码
  },
  cols: [
    // 列配置
  ]
});

在后端接口中，需要根据 limit 和 curr 参数来返回对应的数据。

例如，PHP 中可以这样写：

$limit = $_GET['limit']; // 每页显示的数据条数
$curr = $_GET['page']; // 当前页码
$start = ($curr - 1) * $limit; // 数据起始位置
$data = array_slice($data, $start, $limit); // 获取当前页的数据

这样，就可以实现自定义分页参数了。

相关问题

layui实现自定义分页的例子

以下是一个使用 layui 实现自定义分页的例子：

HTML 代码：

<div class="layui-table-page">
  <div class="layui-box layui-laypage layui-laypage-default">
    <a class="layui-laypage-prev layui-disabled" href="javascript:;" data-page="0">上一页</a>
    <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
    <a class="layui-laypage-next" href="javascript:;" data-page="2">下一页</a>
    <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button class="layui-laypage-btn">确定</button></span>
    <span class="layui-laypage-total">共 100 条</span>
  </div>
</div>

JavaScript 代码：

layui.use(['layer', 'laypage'], function(){
  var layer = layui.layer;
  var laypage = layui.laypage;
  laypage.render({
    elem: '.layui-table-page',
    count: 100,
    limit: 10,
    prev: '<a class="layui-laypage-prev" href="javascript:;" data-page="{{prev}}">上一页</a>',
    next: '<a class="layui-laypage-next" href="javascript:;" data-page="{{next}}">下一页</a>',
    layout: ['prev', 'page', 'next', 'skip', 'total'],
    jump: function(obj, first){
      if(!first){
        // 在这里编写分页的 AJAX 请求代码
        layer.msg('第 '+ obj.curr +' 页');
      }
    }
  });
});

在上面的例子中，我们首先定义了一个包含分页元素的 HTML 结构，并在 JavaScript 中使用 layui.laypage.render() 方法进行分页的渲染。

其中，我们可以通过设置 `count` 属性来指定总条目数，通过设置 `limit` 属性来指定每页显示的条目数，通过设置 `prev` 和 `next` 属性来指定上一页和下一页的 HTML 元素，通过设置 `layout` 属性来指定分页布局，通过设置 `jump` 属性来指定分页跳转时的回调函数。

在 `jump` 回调函数中，我们可以编写分页的 AJAX 请求代码，并使用 `layer.msg()` 方法来提示当前页码。

layui实现自定义分页的增删改查

要实现自定义分页的增删改查功能，需要以下步骤：

1. 引入layui库和相关插件，如layer、form等。
2. 在HTML页面中添加表格DOM结构，包括表头和表格体。
3. 使用layui的table模块初始化表格，并设置表格的列和分页参数。
4. 在服务端编写相应的接口，用于处理分页请求和数据操作请求。
5. 在JavaScript中编写相应的代码，实现分页、查询、新增、修改和删除等功能。

下面是一个简单的示例代码：

HTML部分：

<table id="dataTable" lay-filter="dataTable"></table>

JavaScript部分：

layui.use(['table', 'form', 'layer'], function(){
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;

  //初始化表格
  table.render({
    elem: '#dataTable',
    url: '/getList', //获取数据的接口
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'},
      {field: 'phone', title: '电话'},
      {field: 'address', title: '地址'},
      {title: '操作', toolbar: '#operateBar', width: 200}
    ]],
    page: true, //开启分页
    limit: 10, //每页显示的条数
    limits: [10, 20, 30], //可供选择的每页条数
    id: 'dataTable'
  });

  //监听分页
  table.on('page(dataTable)', function(obj){
    table.reload('dataTable', {
      page: {
        curr: obj.curr //重新从第 obj.curr 页开始
      }
    });
  });

  //监听查询
  form.on('submit(search)', function(data){
    table.reload('dataTable', {
      where: {
        name: data.field.name //传递查询条件
      },
      page: {
        curr: 1 //重新从第一页开始
      }
    });
    return false;
  });

  //监听新增
  form.on('submit(add)', function(data){
    $.post('/add', data.field, function(res){
      if(res.code == 0){
        layer.msg('新增成功');
        table.reload('dataTable');
        layer.close(layer.index);
      }else{
        layer.msg(res.msg);
      }
    });
    return false;
  });

  //监听修改
  form.on('submit(edit)', function(data){
    $.post('/edit', data.field, function(res){
      if(res.code == 0){
        layer.msg('修改成功');
        table.reload('dataTable');
        layer.close(layer.index);
      }else{
        layer.msg(res.msg);
      }
    });
    return false;
  });

  //监听删除
  table.on('tool(dataTable)', function(obj){
    if(obj.event === 'delete'){
      layer.confirm('确定删除该条数据？', function(index){
        $.post('/delete', {id: obj.data.id}, function(res){
          if(res.code == 0){
            layer.msg('删除成功');
            table.reload('dataTable');
            layer.close(index);
          }else{
            layer.msg(res.msg);
          }
        });
      });
    }
  });

});

注意，这只是一个简单的示例代码，实际开发中需要根据具体需求进行修改。同时，还需要在服务端编写相应的接口，用于处理数据请求，这里不再赘述。