数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
