JS实现table表格数据排序功能(可支持动态数据+分页效果)

好的，下面是一个实现 table 表格数据排序功能的示例代码，使用了 JavaScript 和 jQuery 库，并且支持动态数据和分页效果：

HTML 结构：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态数据通过 JS 生成 -->
  </tbody>
</table>

<div id="pagination">
  <!-- 分页效果通过 JS 生成 -->
</div>

JavaScript 代码：

// 定义表格数据
var tableData = [
  { name: '张三', age: 20, gender: '男', email: 'zhangsan@example.com' },
  { name: '李四', age: 25, gender: '女', email: 'lisi@example.com' },
  { name: '王五', age: 30, gender: '男', email: 'wangwu@example.com' },
  // ... 可以有更多的数据
];

// 定义每页显示的行数和当前页码
var rowsPerPage = 10;
var currentPage = 1;

// 初始化表格
function initTable() {
  // 生成表格内容
  var tableBody = $('#myTable tbody');
  tableBody.empty(); // 清空表格内容
  for (var i = (currentPage - 1) * rowsPerPage; i < currentPage * rowsPerPage && i < tableData.length; i++) {
    var rowData = tableData[i];
    var rowHtml = '<tr>' +
      '<td>' + rowData.name + '</td>' +
      '<td>' + rowData.age + '</td>' +
      '<td>' + rowData.gender + '</td>' +
      '<td>' + rowData.email + '</td>' +
      '</tr>';
    tableBody.append(rowHtml);
  }

  // 生成分页效果
  var totalPages = Math.ceil(tableData.length / rowsPerPage);
  var paginationHtml = '';
  for (var i = 1; i <= totalPages; i++) {
    paginationHtml += '<button class="page-link' + (i === currentPage ? ' active' : '') + '">' + i + '</button>';
  }
  $('#pagination').html(paginationHtml);

  // 绑定分页按钮的点击事件
  $('.page-link').click(function() {
    currentPage = parseInt($(this).text());
    initTable();
  });
}

// 绑定表头点击事件
$('#myTable th').click(function() {
  var sortKey = $(this).text().toLowerCase();
  tableData.sort(function(a, b) {
    if (a[sortKey] < b[sortKey]) {
      return -1;
    } else if (a[sortKey] > b[sortKey]) {
      return 1;
    } else {
      return 0;
    }
  });
  initTable();
});

// 初始化表格
initTable();

这段代码中，我们首先定义了一个表格数据数组 `tableData`，然后定义了每页显示的行数和当前页码，以及一个 `initTable` 函数来生成表格内容和分页效果。

在 `initTable` 函数中，我们首先根据当前页码和每页显示的行数来生成表格内容，然后计算出总共需要显示多少页，并根据总页数来生成分页效果。最后，我们还给分页按钮绑定了点击事件，点击时切换当前页码并重新生成表格内容和分页效果。

在表头点击事件中，我们首先获取当前排序的关键字，然后使用 JavaScript 的 `sort` 函数来对表格数据进行排序，并调用 `initTable` 函数来重新生成表格内容和分页效果。

此外，我们还使用了 jQuery 库来方便地操作 DOM 元素，如获取表格、分页容器和分页按钮等。