如何使用 jQuery DataTables 插件处理事件?

jqueryweb developmentfront end technology

jQuery DataTables 是一款功能强大的插件，它提供了用于在 Web 上显示和操作表格数据的高级功能。它提供了一系列丰富的功能，包括排序、搜索、分页等等。虽然 DataTables 简化了创建动态表格的过程，但有效地处理这些表格中的事件对于增强用户交互和自定义行为至关重要。

在本篇博文中，我们将探讨如何使用 jQuery DataTables 插件处理事件。我们将深入探讨基本和高级事件处理技巧，使您能够响应用户操作、执行自定义操作并创建交互式数据表。

设置 jQuery DataTables

在深入探讨 jQuery DataTables 中的事件处理之前，让我们先在您的 Web 项目中设置该插件。

按照以下步骤开始使用 -

下载 jQuery DataTables 插件 - 访问 DataTables 官方网站 (https://datatables.net/) 并下载最新版本的插件。或者，您可以使用 npm 等包管理器，或在 HTML 文件中包含 CDN 链接。
包含必要的依赖项 − jQuery DataTables 需要在您的项目中包含 jQuery。请确保在引入 DataTables 插件之前引入 jQuery 库。
初始化 DataTable − 要创建一个基本的 DataTable，请选择一个 HTML 表格元素并调用其 .DataTable() 方法。您可以根据需要提供选项并自定义 DataTable 的行为。

示例

以下是一个设置基本 DataTable 的示例 −

<!DOCTYPE html>
<html>
<head>
   <title>jQuery DataTables Event Handling</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
         </tr>
         <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
         </tr>
         <!-- More table rows -->
      </tbody>
   </table>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
   <script>
      $(document).ready(function() {
         $('#myTable').DataTable();
      });
   </script>
</body>
</html>

在本示例中，我们包含了 jQuery DataTables 所需的 CSS 和 JavaScript 文件。#myTable 元素被定位并初始化为一个 DataTable。默认情况下，DataTables 会为表格添加排序、搜索和分页功能。

在项目中设置好 jQuery DataTables 后，您可以继续处理各种事件并根据需要自定义其行为。

基本事件处理

jQuery DataTables 提供了多个内置事件，允许您处理用户交互并根据这些事件执行操作。在本节中，我们将介绍一些可用于 DataTables 的基本事件处理技巧。

处理点击事件

点击事件通常用于捕获用户交互并触发特定操作。

DataTables 提供了两个主要的点击事件供您处理:

行点击事件 - 当用户点击表格中的某一行时，就会发生此事件。您可以捕获此事件来执行诸如高亮显示所选行、显示更多详细信息或导航到其他页面等操作。

示例

以下是处理行点击事件的示例:

<!DOCTYPE html>
<html>
<head>
   <title>Handling Row Click Event in jQuery DataTables</title>
   <link rel="stylesheet" type="text/css" href=  "https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
         </tr>
         <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
         </tr>
         <!-- More table rows -->
      </tbody>
   </table>   
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
   <script>
      $(document).ready(function() {
         $('#myTable').DataTable();
   
         $('#myTable').on('click', 'tbody tr', function() {
            var rowData = $(this).find('td').map(function() {
               return $(this).text();
            }).get();
   
            console.log('Clicked row data:', rowData);
            // Perform actions based on the clicked row data
         });
      });
   </script>
</body>
</html>

在这个例子中，我们将点击事件绑定到 #myTable 数据表中的 tbody tr 元素。当用户点击表格行时，事件处理函数将被执行。在事件处理函数内部，我们通过查找 td 元素并将其文本值映射到数组来提取被点击行的数据。然后，行数据将被记录到控制台。

单元格点击事件 - 当用户点击表格中的特定单元格时，会触发此事件。您可以使用此事件根据点击的单元格执行操作，例如编辑单元格值、显示上下文菜单或触发自定义操作。

示例

以下是处理单元格点击事件的示例 -

<!DOCTYPE html>
<html>
<head>
   <title>Handling Cell Click Event in jQuery DataTables</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
         </tr>
         <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
         </tr>
         <!-- More table rows -->
      </tbody>
   </table>   
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
   <script>
      $(document).ready(function() {
         $('#myTable').DataTable();
   
         $('#myTable').on('click', 'tbody td', function() {
            var cellData = $(this).text();
   
            console.log('Clicked cell data:', cellData);
            // 根据点击的单元格数据执行操作
         });
      });
   </script>
</body>
</html>

在本例中，我们将点击事件绑定到 #myTable 数据表中的 tbody 元素。当用户点击单元格时，事件处理函数将被执行。在事件处理函数内部，我们使用 $(this).text() 获取被点击单元格的文本内容，并将其记录到控制台。

通过捕获行和单元格的点击事件，您可以在数据表中创建交互式体验，并有效地响应用户操作。

处理搜索事件

DataTables 插件还提供了与搜索和筛选数据相关的事件。这些事件允许您捕获搜索查询、根据搜索输入执行自定义操作，并动态响应搜索结果的变化。

示例

以下是一个捕获搜索事件并执行自定义操作的示例 -

<!DOCTYPE html>
<html>
<head>
   <title>Capturing Search Event in jQuery DataTables</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
         </tr>
         <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
         </tr>
         <!-- More table rows -->
      </tbody>
   </table>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
   <script>
      $(document).ready(function() {
         var table = $('#myTable').DataTable();
   
         table.on('search.dt', function(e, settings) {
            var searchValue =    settings.oPreviousSearch.sSearch;
   
            console.log('Search value:', searchValue);
            // 根据搜索值执行自定义操作
         });
      });
  </script>
</body>
</html>

在本例中，我们将 search.dt 事件绑定到 #myTable 数据表。每当对数据表执行搜索时，都会触发此事件。事件处理函数接收事件对象 e 和数据表设置对象 settings。我们使用 settings.oPreviousSearch.sSearch 从设置对象中提取搜索值并将其记录到控制台。然后，您可以根据搜索值执行自定义操作。

高级事件处理

除了上一节中介绍的基本事件处理技巧外，jQuery DataTables 还提供了高级事件处理选项，允许您进一步自定义数据表的行为。在本节中，我们将探讨两种常用的高级事件处理场景:排序事件和分页事件。

排序事件

排序是 DataTables 的一项基本功能，它允许用户根据特定列对表格数据进行排序。

您可以捕获排序事件，以便在排序状态更改时执行其他操作或应用自定义逻辑。

jQuery DataTables 提供了两个与排序相关的事件:

排序事件 - 当一个或多个列的排序顺序发生更改时，将触发此事件。您可以使用此事件执行诸如根据新的排序顺序更新数据或刷新相关组件之类的操作。

示例

以下是处理排序事件的示例:

<!DOCTYPE html>
<html>
<head>
   <title>Order Event Example</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
         </tr>
         <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
         </tr>
         <!-- More table rows -->
      </tbody>
   </table>   
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
   <script>
      $(document).ready(function() {
         var table = $('#myTable').DataTable();
   
         table.on('order.dt', function(e, settings) {
            var sortedColumns = settings.aaSorting;
            console.log('Sorted columns:', sortedColumns);
            // 根据排序后的列执行操作
         });
      });
   </script>
</body>
</html>

在本例中，我们将 order.dt 事件绑定到 #myTable 数据表。每当排序顺序发生变化时，都会触发此事件。事件处理函数接收事件对象 e 和数据表设置对象 settings。我们从 settings.aaSorting 中提取已排序列的信息，并将其记录到控制台。然后，您可以根据已排序列执行自定义操作。

排序事件 - 当单个列的排序顺序发生变化时，会触发此事件。您可以使用此事件执行与已排序列相关的特定操作，例如更新 UI 或触发其他操作。

示例

以下是处理排序的示例 -

<!DOCTYPE html>
<html>
<head>
   <title>Sort Event Example</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
         </tr>
         <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
         </tr>
         <!-- More table rows -->
      </tbody>
   </table>   
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
   <script>
      $(document).ready(function() {
         var table = $('#myTable').DataTable();
   
         table.on('order.dt', function(e, settings) {
            var sortedColumn = settings.aaSorting[0][0];
            var sortDirection = settings.aaSorting[0][1];
            console.log('Sorted column:', sortedColumn);
            console.log('Sort direction:', sortDirection);
            // 根据排序后的列和方向执行操作
         });
      });
   </script>
</body>
</html>

在本例中，我们将 order.dt 事件绑定到 #myTable 数据表。当排序顺序发生变化时，该事件会被触发。在事件处理函数中，我们从 settings.aaSorting 中提取已排序的列及其排序方向，并将它们记录到控制台。然后，您可以根据已排序的列和方向执行自定义操作。

分页事件

分页允许用户在数据表中浏览不同的数据页面。jQuery DataTables 提供了分页事件，您可以处理这些事件，以便在分页状态发生变化时执行相应的操作。

与分页相关的事件如下:

页面更改事件 - 当用户导航到不同的页面时，此事件会被触发。您可以使用此事件来更新用户界面、获取新页面的其他数据或触发其他相关操作。

示例

以下是处理页面更改事件的示例 -

<!DOCTYPE html>
<html>
<head>
   <title>Page Change Event Example</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
         </tr>
      </thead>
      <tbody>
         <!-- Large number of table rows -->
      </tbody>
   </table>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
   <script>
      $(document).ready(function() {
         var table = $('#myTable').DataTable();
   
         table.on('page.dt', function(e, settings) {
            var currentPage = settings._iDisplayStart / settings._iDisplayLength + 1;
            console.log('Current page:', currentPage);
            // 根据当前页面执行操作
         });
      });
   </script>
</body>
</html>

在本例中，我们将 page.dt 事件绑定到 #myTable 数据表。当页面更改时，该事件会被触发。在事件处理函数中，我们根据设置对象的 display start 和 display length 属性计算当前页码，并将其记录到控制台。然后，您可以根据当前页码执行自定义操作。

页面长度更改事件 - 当用户更改每页显示的行数时，此事件会被触发。您可以使用此事件根据新的页面长度调整 UI 或数据获取策略。

示例

以下是处理页面长度更改事件的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Page Length Change Event Example</title>
   <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">
</head>
<body>
   <table id="myTable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
         </tr>
      </thead>
      <tbody>
         <!-- Large number of table rows -->
      </tbody>
   </table>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
   <script>
      $(document).ready(function() {
         var table = $('#myTable').DataTable();
   
         table.on('length.dt', function(e, settings, len) {
            console.log('New page length:', len);
            // 根据新的页面长度执行操作
         });
      });
   </script>
</body>
</html>

在本例中，我们将 length.dt 事件绑定到 #myTable 数据表。当页面长度发生变化时，该事件会被触发。事件处理函数接收事件对象 e、数据表设置对象 settings 以及新的页面长度值 len。我们将新的页面长度记录到控制台。然后，您可以根据新的页面长度执行自定义操作。

结论

在本篇博文中，我们探讨了如何使用 jQuery DataTables 插件处理事件。我们学习了基本的事件处理技巧以及排序和分页事件等高级场景。通过利用这些事件处理程序，您可以自定义数据表的行为，增强用户交互，并根据用户交互执行其他操作。

打印下一节:如何使用 jQuery DataTables 插件处理多行选择? ❯❮ 上一节:如何在 jQuery 中处理动态创建元素的事件?

技术文章和资源

热门类别

如何使用 jQuery DataTables 插件处理事件?

设置 jQuery DataTables

示例

基本事件处理

处理点击事件

示例

示例

处理搜索事件

示例

高级事件处理

排序事件

示例

示例

分页事件

示例

示例

结论

相关文章

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！