如何使用 jQuery 通过分页使表格可搜索和排序？

在 web 开发中，经常需要对表格进行搜索和排序操作，这需要借助一些功能强大的框架和库来实现。其中，jQuery 是最受欢迎的 JavaScript 库之一，它提供丰富的 API 和工具，可以大幅度简化前端开发的工作。下面就让我们来学习如何使用 jQuery 实现表格的搜索和排序。

搜索表格

首先，我们需要有一个包含数据的表格。为了方便演示，这里我们使用一个简单的 HTML 表格来表示一个用户列表：

<table id="userTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>18</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

接下来，我们使用 jQuery 编写一个搜索功能。我们需要创建一个输入框和一个搜索按钮：

<input type="text" id="searchBox">
<button type="button" id="searchButton">搜索</button>

然后，在 JS 中，我们可以使用 jQuery 的 $.fn.filter 方法来筛选满足条件的行，并显示出来：

$('#searchButton').click(function() {
  var keyword = $('#searchBox').val();
  if (keyword !== '') {
    $('#userTable tbody tr').hide();
    $('#userTable tbody td:contains("' + keyword + '")').parent().show();
  } else {
    $('#userTable tbody tr').show();
  }
});

这段代码实现了一个简单的搜索功能。当用户输入搜索关键字并点击搜索按钮之后，会自动筛选出所有包含关键字的行，并隐藏不满足条件的行。

排序表格

除了搜索，我们还需要一个方法来排序表格。在本例中，我们将按照年龄从小到大来排序，也可以按照其他列进行排序。我们需要在 HTML 中添加排序按钮：

<thead>
  <tr>
    <th>姓名 <i class="sort-icon"></i></th>
    <th>年龄 <i class="sort-icon"></i></th>
    <th>性别 <i class="sort-icon"></i></th>
  </tr>
</thead>

然后，在 JS 中，我们可以使用 jQuery 的 $.fn.sort 方法来对表格进行排序：

$('#userTable th').click(function() {
  var column = $(this).index();
  var rows = $('#userTable tbody tr').get();

  rows.sort(function(a, b) {
    var aValue = $(a).children('td').eq(column).text();
    var bValue = $(b).children('td').eq(column).text();
    return aValue.localeCompare(bValue);
  });

  if ($(this).hasClass('ascend')) {
    rows.reverse();
    $(this).removeClass('ascend').addClass('descend');
    $(this).find('.sort-icon').removeClass('fa-sort-amount-asc').addClass('fa-sort-amount-desc');
  } else {
    $(this).removeClass('descend').addClass('ascend');
    $(this).find('.sort-icon').removeClass('fa-sort-amount-desc').addClass('fa-sort-amount-asc');
  }

  $.each(rows, function(index, row) {
    $('#userTable tbody').append(row);
  });
});

这段代码实现了一个简单的排序功能。当用户点击排序按钮之后，会自动按照当前列进行排序，并将排序结果反转。同时，我们还在按钮上添加了一个小箭头图标，用于显示当前排序状态（升序或降序）。

分页表格

在真实的项目中，经常需要借助分页来展示大量的数据。为了让表格支持分页，我们可以使用 jQuery 插件 DataTables。

<table id="userTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <!-- 这里省略其他数据行 -->
  </tbody>
</table>

// 在 HTML 文件中引入 jQuery 和 DataTables 的库文件
<script src="//cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/datatables/1.10.25/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/datatables/1.10.25/css/jquery.dataTables.min.css">

// 在 JS 文件中初始化 DataTables
$(document).ready(function() {
  $('#userTable').DataTable({
    "pagingType": "simple_numbers",
    "lengthMenu": [ 5, 10, 20, 50 ],
    "language": {
      "paginate": {
        "previous": "<",
        "next": ">"
      }
    }
  });
});

这段代码使用了 DataTables 的库文件，并在 JS 中初始化了一个 DataTable 实例。我们可以通过 pagingType 属性来指定分页器的类型，lengthMenu 属性来指定每页可以显示的记录数，以及 language 属性来定义分页控件的文本。

结语

通过使用 jQuery，我们可以轻松地为表格添加搜索、排序和分页功能，让用户更加便捷地浏览、查找和分析数据。同时，我们也可以结合其他库和框架，来打造更加高效和流畅的用户体验。