jQuery给表格添加分页效果

下面我将详细讲解如何使用jQuery给表格添加分页效果。

1. 引入jQuery和分页插件

首先，在页面中引入jQuery和分页插件。这里以bootstrap-table插件为例，它是一个基于Bootstrap样式的表格插件，并且可以很方便地实现分页、搜索、排序、导出等功能。

<!-- 引入jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入bootstrap-table插件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/locale/bootstrap-table-zh-CN.min.js"></script>

2. 创建表格并初始化

创建一个table元素，并设置id属性，用于后续分页操作。

<table id="myTable"></table>

接着，在JavaScript代码中，使用bootstrapTable方法对表格进行初始化配置。在分页插件中，主要使用pageList、pageSize、pageNumber、totalRows等选项来实现分页。

$(function () {
  var data = [
    {id: 1, name: '张三', age: 20},
    {id: 2, name: '李四', age: 25},
    {id: 3, name: '王五', age: 30},
    // 省略更多数据
  ];

  $('#myTable').bootstrapTable({
    data: data,
    pagination: true,
    pageList: [10, 20, 50, 100],
    pageSize: 10,
    pageNumber: 1,
    totalRows: data.length,
    columns: [
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'}
    ]
  });
});

这里通过bootstrapTable方法将数据表格进行了初始化配置，其中data选项用于设置数据源，pagination选项用于启用分页，pageList选项设置每页显示条数的选择列表，pageSize选项设置每页显示条数的初始值，pageNumber选项设置当前页码的初始值，totalRows选项设置总记录数，columns选项用于配置表格列信息。

3. 实现分页回调函数

接下来，需要实现分页回调函数，即在用户切换页码时获取对应的数据并更新表格显示。

$('#myTable').on('page-change.bs.table', function (e, number, size) {
  var offset = (number - 1) * size;
  var rows = data.slice(offset, offset + size);

  // 更新表格数据
  $(this).bootstrapTable('load', rows);
});

这里使用on方法在表格上绑定page-change.bs.table事件，当用户切换页码时，会触发该事件，并且可以获取到当前页码number和每页显示条数size。然后，可以根据这些参数来对数据源进行筛选，获取对应的数据，并且使用load方法重载表格数据。

4. 添加分页控件

最后，还需要添加分页控件，让用户能够方便地进行分页操作。

<div id="pagination"></div>
<script>
  $(function () {
    $('#myTable').bootstrapTable({
      // 省略其他选项
      pagination: true,
      paginationSelector: '#pagination',
      paginationPreText: '上一页',
      paginationNextText: '下一页',
      paginationFirstText: '首页',
      paginationLastText: '末页'
    });
  });
</script>

这里使用paginationSelector选项指定分页控件的选择器，然后可以根据需要设置分页控件的样式或文本内容。

示例一：使用bootstrap4样式的分页控件

<div class="d-flex justify-content-center">
  <nav>
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="javascript:void(0)" data-page="1">首页</a></li>
      <li class="page-item"><a class="page-link" href="javascript:void(0)" data-page="prev">上一页</a></li>
      <li class="page-item"><a class="page-link" href="javascript:void(0)" data-page="next">下一页</a></li>
      <li class="page-item"><a class="page-link" href="javascript:void(0)" data-page="last">末页</a></li>
    </ul>
  </nav>
</div>
<script>
  $('#pagination').on('click', 'a', function () {
    var $this = $(this);
    var page = $this.data('page');
    if (page === 'prev') {
      $('#myTable').bootstrapTable('prevPage');
    } else if (page === 'next') {
      $('#myTable').bootstrapTable('nextPage');
    } else if (page === 'first') {
      $('#myTable').bootstrapTable('firstPage');
    } else if (page === 'last') {
      $('#myTable').bootstrapTable('lastPage');
    } else {
      $('#myTable').bootstrapTable('selectPage', page);
    }
  });
</script>

示例二：使用LayUI样式的分页控件

<div id="pagination"></div>
<script>
  $(function () {
    $('#myTable').bootstrapTable({
      // 省略其他选项
      pagination: true,
      paginationSelector: '#pagination',
      paginationPreText: '<i class="layui-icon layui-icon-left"></i>',
      paginationNextText: '<i class="layui-icon layui-icon-right"></i>',
      paginationFirstText: '首页',
      paginationLastText: '末页'
    });
  });
</script>

以上就是使用jQuery实现分页效果的完整攻略，希望可以帮助到你。