資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery DataTables 外掛處理事件？
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 DataTable 中的 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);
// Perform actions based on the clicked cell data
});
});
</script>
</body>
</html>
在此示例中，我們將點選事件繫結到 #myTable DataTable 中的 tbody td 元素。當用戶點選單元格時，會執行事件處理程式函式。在事件處理程式中，我們使用 $(this).text() 檢索點選單元格的文字內容並將其記錄到控制檯。
透過捕獲行和單元格點選事件，您可以在 DataTables 中建立互動式體驗並有效地響應使用者操作。
處理搜尋事件
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);
// Perform custom action based on the search value
});
});
</script>
</body>
</html>
在此示例中，我們將 search.dt 事件繫結到 #myTable DataTable。每當在 DataTable 上執行搜尋時，都會觸發該事件。事件處理程式函式接收事件物件 e 和 DataTable 設定物件 settings。我們使用 settings.oPreviousSearch.sSearch 從 settings 物件中提取搜尋值並將其記錄到控制檯。然後，您可以根據搜尋值執行自定義操作。
高階事件處理
除了上一節中介紹的基本事件處理技術外，jQuery DataTables 還提供了高階事件處理選項，允許您進一步自定義資料表的行為。在本節中，我們將探討兩種常用的高階事件處理場景：排序事件和分頁事件。
排序事件
排序是 DataTables 的一項基本功能，允許使用者根據特定列對錶格資料進行排序。您可以捕獲排序事件以在排序狀態發生變化時執行其他操作或應用自定義邏輯。
jQuery DataTables 提供了兩個與排序相關的事件 -
Order 事件 - 每當一列或多列的排序順序發生變化時，都會觸發此事件。您可以使用此事件執行操作，例如根據新的排序順序更新資料或重新整理相關元件。
示例
以下是如何處理 Order 事件的示例 -
<!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);
// Perform actions based on the sorted columns
});
});
</script>
</body>
</html>
在此示例中，我們將 order.dt 事件繫結到 #myTable DataTable。每當排序順序發生變化時，都會觸發該事件。事件處理程式函式接收事件物件 e 和 DataTable 設定物件 settings。我們從 settings.aaSorting 中提取排序列資訊並將其記錄到控制檯。然後，您可以根據排序列執行自定義操作。
Sort 事件 - 當單個列的排序順序發生變化時，會觸發此事件。您可以使用此事件執行與排序列相關的特定操作，例如更新 UI 或觸發其他操作。
示例
以下是如何處理 sort 的示例 -
<!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);
// Perform actions based on the sorted column and direction
});
});
</script>
</body>
</html>
在此示例中，我們將 order.dt 事件繫結到 #myTable DataTable。當排序順序發生變化時，會觸發該事件。在事件處理程式函式中，我們從 settings.aaSorting 中提取排序列及其排序方向並將其記錄到控制檯。然後，您可以根據排序列和方向執行自定義操作。
分頁事件
分頁允許使用者在 DataTable 中瀏覽不同頁面的資料。jQuery DataTables 提供了分頁事件，您可以處理這些事件以在分頁狀態發生變化時執行操作。
分頁相關的事件如下 -
頁面更改事件 - 當用戶導航到不同的頁面時，會觸發此事件。您可以使用此事件更新 UI、為新頁面獲取其他資料或觸發其他相關操作。
示例
以下是如何處理頁面更改事件的示例 -
<!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);
// Perform actions based on the current page
});
});
</script>
</body>
</html>
在此示例中，我們將 page.dt 事件繫結到 #myTable DataTable。當頁面更改時，會觸發該事件。在事件處理程式函式中，我們根據 settings 物件的 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);
// Perform actions based on the new page length
});
});
</script>
</body>
</html>
在此示例中，我們將 length.dt 事件繫結到 #myTable DataTable。當頁面長度發生變化時，會觸發該事件。事件處理程式函式接收事件物件 e、DataTable 設定物件 settings 和新的頁面長度值 len。我們將新的頁面長度記錄到控制檯。然後，您可以根據新的頁面長度執行自定義操作。
結論
在這篇博文中，我們探討了如何使用 jQuery DataTables 外掛處理事件。我們瞭解了基本事件處理技術以及排序和分頁事件等高階場景。透過利用這些事件處理程式，您可以自定義 DataTables 的行為，增強使用者互動並在使用者互動的基礎上執行其他操作。
1K+ 瀏覽量
