layui表格分页不生效怎么办

1. 引言

在网页开发过程中，常常会用到表格来展示数据。而在大量数据展示的情况下，一般需要进行分页处理，否则会使页面显得非常臃肿，影响用户体验。而layui是一种非常流行的前端UI库，其中提供了一些表格分页的解决方案。但是有时候我们可能会遇到layui表格分页不生效的问题，那么我们该如何处理呢？

2. layui表格分页介绍

layui的表格分页通常有两种实现方式：

2.1 通过data参数实现

通过data参数实现表格分页，是通过传入一个数组对象来进行表格渲染。这种方式的实现非常简单，只需要在table模块中加上lay-data属性，传入data对象即可。比如：

layui.use(['table'], function(){
  var table = layui.table;
  
  //渲染表格
  table.render({
    elem: '#tableDemo',
    cols: [[ //表头
      {field: 'id', title: 'ID', width:80},
      {field: 'username', title: '用户名', width:120},
      {field: 'sex', title: '性别', width:90},
      {field: 'city', title: '城市', width:110},
      {field: 'sign', title: '签名', width: 200},
      {field: 'experience', title: '积分', width: 80},
      {field: 'score', title: '评分', width: 80},
      {field: 'classify', title: '职业', width: 100},
      {field: 'wealth', title: '财富', width: 135},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]],
    data: [
      {id: '10001', username: '杜甫', sex: '男', city: '浙江杭州', sign: '人生恰似一场修行', experience: '116', score: '80', classify: '诗人', wealth: '9000'},
      {id: '10002', username: '李白', sex: '男', city: '浙江杭州', sign: '大江东去，浪淘尽千古风华', experience: '78', score: '85', classify: '诗人', wealth: '5900'},
      {id: '10003', username: '王勃', sex: '男', city: '浙江杭州', sign: '文章千古事，得失生死瞬间', experience: '109', score: '60', classify: '作家', wealth: '2500'},
      {id: '10004', username: '李清照', sex: '女', city: '浙江杭州', sign: '愿得一人心，白首不相离', experience: '120', score: '77', classify: '词人', wealth: '6000'}
    ],
  });
});

这里的data对象是一个包含多个对象的数组，表头和表格中的具体数据都是从这个数组中获取的。如果要实现分页功能，只需要在渲染表格时加上page属性即可，比如：

table.render({
  elem: '#tableDemo',
  cols: [[ //表头
    {field: 'id', title: 'ID', width:80},
    {field: 'username', title: '用户名', width:120},
    {field: 'sex', title: '性别', width:90},
    {field: 'city', title: '城市', width:110},
    {field: 'sign', title: '签名', width: 200},
    {field: 'experience', title: '积分', width: 80},
    {field: 'score', title: '评分', width: 80},
    {field: 'classify', title: '职业', width: 100},
    {field: 'wealth', title: '财富', width: 135},
    {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
  ]],
  data: [
    {id: '10001', username: '杜甫', sex: '男', city: '浙江杭州', sign: '人生恰似一场修行', experience: '116', score: '80', classify: '诗人', wealth: '9000'},
    {id: '10002', username: '李白', sex: '男', city: '浙江杭州', sign: '大江东去，浪淘尽千古风华', experience: '78', score: '85', classify: '诗人', wealth: '5900'},
    {id: '10003', username: '王勃', sex: '男', city: '浙江杭州', sign: '文章千古事，得失生死瞬间', experience: '109', score: '60', classify: '作家', wealth: '2500'},
    {id: '10004', username: '李清照', sex: '女', city: '浙江杭州', sign: '愿得一人心，白首不相离', experience: '120', score: '77', classify: '词人', wealth: '6000'}
  ],
  page: true, //开启分页功能
});

2.2 通过url参数实现

通过url参数实现表格分页，是通过传入表格数据的url地址来进行表格渲染。这种方式适用于表格数据比较庞大的情况，可以避免一次性将所有数据加载到前端。同样地，只需要在table模块中加上lay-data属性，只不过data改为url即可。比如：

layui.use(['table'], function(){
  var table = layui.table;
  
  //渲染表格
  table.render({
    elem: '#tableDemo',
    url: '/demo/table/user/', //数据接口
    page: true, //开启分页
    cols: [[ //表头
      {field: 'id', title: 'ID', width:80},
      {field: 'username', title: '用户名', width:120},
      {field: 'sex', title: '性别', width:90},
      {field: 'city', title: '城市', width:110},
      {field: 'sign', title: '签名', width: 200},
      {field: 'experience', title: '积分', width: 80},
      {field: 'score', title: '评分', width: 80},
      {field: 'classify', title: '职业', width: 100},
      {field: 'wealth', title: '财富', width: 135},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
});

3. layui表格分页不生效的解决方案

虽然layui表格分页有两种实现方式，但是通常情况下都会遇到layui表格分页不生效的情况，这可能是由于以下几种原因导致的：

3.1 原因1：数据没有按照规定格式返回

无论是通过data还是url参数来实现layui表格分页，返回的数据格式都必须按照固定规定进行格式化。这里以通过url参数实现表格分页为例，数据一般是以json格式进行返回的，格式如下：

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{
    "id": "10001",
    "username": "杜甫",
    "sex": "男",
    "city": "浙江杭州",
    "sign": "人生恰似一场修行",
    "experience": 116,
    "score": 80,
    "classify": "诗人",
    "wealth": 9000
  }, {
    "id": "10002",
    "username": "李白",
    "sex": "男",
    "city": "浙江杭州",
    "sign": "大江东去，浪淘尽千古风华",
    "experience": 78,
    "score": 85,
    "classify": "诗人",
    "wealth": 5900
  }]
}

注意看返回的json数据中必须包括code、count、msg、data等字段，code必须为0才算成功。同时count表示数据的总数，data表示具体的数据数组对象。如果数据未按照规定格式返回，那么分页就不会生效。

需要注意的是，不同的开发人员可能会有不同的返回格式，此时我们可以使用layui提供的response设置来对接口返回数据进行解析。比如：

table.render({
  elem: '#tableDemo',
  url: '/demo/table/user/',
  page: true,
  cols: [[
    {field: 'id', title: 'ID', width:80},
    {field: 'username', title: '用户名', width:120},
    {field: 'sex', title: '性别', width:90},
    {field: 'city', title: '城市', width:110},
    {field: 'sign', title: '签名', width: 200},
    {field: 'experience', title: '积分', width: 80},
    {field: 'score', title: '评分', width: 80},
    {field: 'classify', title: '职业', width: 100},
    {field: 'wealth', title: '财富', width: 135},
    {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
  ]],
  response: {
    statusCode: 0 //规定成功的状态码，默认：0。如果不正确的话，table 组件会做出异常提示（抛出异常）
  }
});

3.2 原因2：分页组件绑定事件错误

另外一种原因是分页组件绑定事件错误。分页组件的渲染是异步进行的，所以很可能会在分页组件的渲染完成之前就绑定了事件，造成事件无法绑定成功的问题。这种问题可以通过一些方法来解决，比如：

一种解决方法是通过继承lay绑定事件的方式来解决。比如需要绑定一个btn事件，可以这样实现：

layui.use(['table', 'jquery'], function(){
  var table = layui.table;
  var $ = layui.jquery;
  
  //继承layui事件
  $.extend({
    tableBtnEvent: function(){
      $('.btn').click(function(){
        //do something
      });
    }
  });
  
  //渲染表格
  table.render({
    elem: '#tableDemo',
    url: '/demo/table/user/',
    page: true,
    cols: [[
      {field: 'id', title: 'ID', width:80},
      {field: 'username', title: '用户名', width:120},
      {field: 'sex', title: '性别', width:90},
      {field: 'city', title: '城市', width:110},
      {field: 'sign', title: '签名', width: 200},
      {field: 'experience', title: '积分', width: 80},
      {field: 'score', title: '评分', width: 80},
      {field: 'classify', title: '职业', width: 100},
      {field: 'wealth', title: '财富', width: 135},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]],
    response: {
      statusCode: 0
    },
    done: function(res, curr, count){
      //渲染完毕后执行
      $.tableBtnEvent();
    }
  });
});

这样做的效果是，当layui的分页组件渲染完成之后，会执行done回调函数，此时我们可以用$.tableBtnEvent()方法进行事件绑定，从而避免了事件无法绑定的问题。

3.3 原因3：版本不匹配

还有一种原因是layui库版本不匹配。有时候我们使用的是较新的版本的layui库，而table模块中的分页组件是针对老版本的处理方式，这样就会出现分页不生效的问题。解决这种问题的方法就是重新下载符合版本要求的layui库。

4. 总结

Layui是一种非常方便的前端UI库，里面提供了表格分页的解决方案。无论是通过data还是url参数实现表格分页，都必须按照一定的格式进行数据返回才能让分页生效。此外，还要注意分页组件绑定事件的方法，以及layui库版本的匹配问题，才能让layui表格分页不再出现问题。