資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在使用 jQuery DataTables 外掛時，在回撥函式內部使用 API？
在 jQuery 中，DataTables 外掛允許我們向 HTML 表格新增一些額外的功能。當你使用原始 HTML 建立表格時，它看起來沒有格式。因此，我們需要使用 CSS 對其進行樣式設定。此外，我們需要向表格新增一些功能，例如分頁、在表格中搜索以及根據特定列的資料按升序和降序排序。因此，所有這些都需要開發人員付出大量努力。
如果我說我們使用 DataTables 外掛新增所有功能呢？是的，你沒聽錯。在這裡，我們將瞭解使用 DataTables 外掛 API 的不同示例。
語法
使用者可以按照以下語法，將 DataTable 外掛 API 與任何 HTML 表格一起使用。
$("table_selector").DataTable({
});
在上述語法中，“table_selector” 是一個 CSS 選擇器，用於使用 jQuery 訪問表格。
示例 1
在下面的示例中，我們在 <head> 標籤中添加了 JQUery 的 DataTable 外掛的 CDN 連結。之後，我們建立了表示房屋資料的表格並添加了 4 列。此外，我們還為房屋添加了一些資料。在 Jquery 中，我們訪問了表格並呼叫了 DataTable() 方法。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
</head>
<body>
<h3> Using the <i> Data table plugin API </i> to add extra features in the table </h3>
<div>
<table id = "home_table">
<thead>
<tr>
<th> House Id </th>
<th> Total Rooms </th>
<th> Colour </th>
<th> City </th>
</tr>
</thead>
<tr>
<td> 1 </td>
<td> 3 </td>
<td> Red </td>
<td> London </td>
</tr>
<tr>
<td> 2 </td>
<td> 4 </td>
<td> Blue </td>
<td> Manchester </td>
</tr>
<tr>
<td> 3 </td>
<td> 5 </td>
<td> Green </td>
<td> Leeds </td>
</tr>
<tr>
<td> 4 </td>
<td> 6 </td>
<td> Yellow </td>
<td> Sheffield </td>
</tr>
<tr>
<td> 5 </td>
<td> 7 </td>
<td> Orange </td>
<td> Bradford </td>
</tr>
</table>
</div>
<script>
$(document).ready(function () {
$("#home_table").DataTable({
});
});
</script>
</body>
</html>
在輸出中，使用者可以觀察到 CSS 和適當的樣式已新增到表格中。此外，使用者可以在表格中搜索。
在下面的示例中，我們建立了國家資料表。我們添加了 5 個不同的列，分別代表國家資料，例如國家名稱、人口、GDP 等。
在 Jquery 中，我們使用了 DataTables 外掛，並且我們在物件中定義了一些要應用於表格的屬性。例如，添加了“responsive”屬性以使表格具有響應性。“ordering” 屬性用於允許使用者按升序或降序對錶格進行排序。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script src = "https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"> </script>
</head>
<body>
<h3> Using the Data table plugin API to add extra features in the table </h2>
<table id = "countries">
<thead>
<tr>
<th> Country </th>
<th> Capital </th>
<th> Continent </th>
<th> Population </th>
<th> GDP </th>
</tr>
</thead>
<tr>
<td> India </td>
<td> New Delhi </td>
<td> Asia </td>
<td> 1,300,000,000 </td>
<td> 2,000,000,000 </td>
</tr>
<tr>
<td> United States </td>
<td> Washington, D.C. </td>
<td> North America </td>
<td> 325,000,000 </td>
<td> 18,000,000,000 </td>
</tr>
<tr>
<td> United Kingdom </td>
<td> London </td>
<td> Europe </td>
<td> 65,000,000 </td>
<td> 2,500,000,000 </td>
</tr>
<tr>
<td> France </td>
<td> Paris </td>
<td> Europe </td>
<td> 65,000,000 </td>
<td> 2,500,000,000 </td>
</tr>
<tr>
<td> Germany </td>
<td> Berlin </td>
<td> Europe </td>
<td> 80,000,000 </td>
<td> 3,500,000,000 </td>
</tr>
<tr>
<td> Italy </td>
<td> Rome </td>
<td> Europe </td>
<td> 60,000,000 </td>
<td> 2,000,000,000 </td>
</tr>
<tr>
<td> Japan </td>
<td> Tokyo </td>
<td> Asia </td>
<td> 125,000,000 </td>
<td> 4,500,000,000 </td>
</tr>
<tr>
<td> China </td>
<td> Beijing </td>
<td> Asia </td>
<td> 1,350,000,000 </td>
<td> 10,000,000,000 </td>
</tr>
<tr>
<td> Russia </td>
<td> Moscow </td>
<td> Europe </td>
<td> 145,000,000 </td>
<td> 1,500,000,000 </td>
</tr>
</table>
</div>
<script>
$(document).ready(function () {
$("#countries").DataTable({
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
"paging": true,
"lengthChange": true,
"searching": true,
});
});
</script>
</body>
</html>
使用者學習瞭如何在 Jquery 中使用 DataTables 外掛以正確格式排列表格，並新增搜尋和排序等功能。
370 次瀏覽
