利用jquery实现表格分页

利用jQuery实现表格分页通常涉及以下几个步骤：

1. **HTML结构**：首先，你需要有一个包含表格数据的HTML结构，例如`<table>`标签，每个页可以有`<tbody>`部分用于显示当前页的数据。

<table id="data-table">
  <thead>
    <!-- 表头 -->
  </thead>
  <tbody></tbody> <!-- 数据将在这个区域动态加载 -->
</table>

<!-- 分页导航 -->
<nav id="pagination"></nav>

2. **数据源**：假设你的数据存储在一个数组或其他数据结构中，分页功能需要知道总共有多少页以及每页显示多少条记录。

3. **初始化函数**：使用jQuery，创建一个函数来处理分页操作。这包括获取总页数、计算当前页的数据范围，然后根据这些信息从服务器或本地数据源加载对应的数据。

$(document).ready(function() {
  var data = []; // 假设这是你的数据源
  var pageSize = 10; // 每页显示的记录数
  var currentPage = 1;
  
  function loadPage(page) {
    var start = (page - 1) * pageSize;
    var end = start + pageSize;
    
    // 加载数据并更新表格内容
    displayData(data.slice(start, end));
  }
  
  // 初始化展示第一页数据
  loadPage(currentPage);
});

4. **分页导航**：创建一个事件监听器，如点击按钮时更新`currentPage`值并加载新的页面数据。

$('#pagination button').on('click', function(e) {
  e.preventDefault();
  var page = parseInt($(this).text());
  loadPage(page);
});

5. **展示数据**：最后，在`loadPage`函数中，通过DOM操作将新数据插入到表格的`<tbody>`里。

function displayData(newData) {
  $('#data-table tbody').empty(); // 清空当前页数据
  $.each(newData, function(index, item) {
    // 添加行到表格
  });
}