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

在前端开发中，需要对表格进行搜索和排序是一项常见的任务。jQuery 提供了丰富的方法和插件，可以轻松实现这些功能。本文将介绍如何使用 jQuery 通过分页使表格可搜索和排序。

环境准备

在开始之前，需要确保环境中已经引入 jQuery 和相关的插件。本文中使用的插件包括：

• jquery.dataTables.js：一个用于表格排序和分页的 jQuery 插件。
• jquery.dataTables.css：jquery.dataTables.js 对应的 CSS 文件。
• jquery.dataTables.min.js：经过压缩的 jquery.dataTables.js。

可以从官方网站或者 GitHub 上下载这些文件。

实现搜索和排序

搜索

要实现对表格的搜索功能，可以使用 jquery.dataTables.js 中提供的 search() 方法。该方法可以接收一个字符串作为参数，表示要进行搜索的关键字。

假设有一个表格如下所示：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>30</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

如果需要对该表格进行搜索，只需要在搜索框中输入关键字，并在输入框中绑定 keyup 事件，在事件处理函数中调用 search() 方法即可：

<input type="text" id="searchInput"/>

<script>
  $("#searchInput").on("keyup", function() {
    var keyword = $(this).val();
    var table = $("#myTable").DataTable();
    table.search(keyword).draw();
  });
</script>

这里使用了 DataTable() 方法初始化表格，然后调用 search() 方法进行搜索。

排序

要实现对表格的排序功能，同样可以使用 jquery.dataTables.js 中提供的方法。例如，可以使用 order() 方法指定表格排序的列和排序方式。在该方法中，需要传入一个数组，该数组的每个元素表示一个排序规则。每个排序规则是一个数组，其中第一个元素表示排序的列，第二个元素表示排序的方式（升序或降序）。

下面是一个示例，该示例对表格中的第二列进行降序排序：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>30</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

<script>
  $("#myTable").DataTable({
    order: [[1, "desc"]]
  });
</script>

这里使用了 DataTable() 方法初始化表格，并在参数中使用 order 属性指定排序规则。

实现分页

要实现对表格的分页功能，同样可以使用 jquery.dataTables.js 中提供的方法。可以使用 paging() 方法指定每页显示的记录数。在该方法中，需要传入一个参数，表示每页显示的记录数。当表格中的记录超过该数量时，会自动显示分页器。

下面是一个示例，该示例对表格进行分页，每页显示 2 条记录：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>30</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>28</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Lucy</td>
      <td>27</td>
      <td>Boston</td>
    </tr>
  </tbody>
</table>

<script>
  $("#myTable").DataTable({
    paging: {
      pageLength: 2
    }
  });
</script>

这里使用了 DataTable() 方法初始化表格，并在参数中使用 paging 属性指定每页显示的记录数。

结语

本文介绍了如何使用 jQuery 通过分页使表格可搜索和排序。利用插件 jquery.dataTables.js 可以轻松实现这些功能。这些插件不仅提供了丰富的功能，而且使用起来也非常方便。希望本文能对你有所帮助。