极客教程jQuery 如何从嵌套数组中加载数据到 DataTables 中
DataTables 是一个现代化的 jQuery 插件，可为网页的 HTML 表格添加交互和高级控件。它是一个非常简单易用的插件，开发者可以根据应用程序的需要轻松自定义它。该插件的特性包括分页、排序、搜索和多列排序等等。
在本文中，我们将学习使用 DataTables 插件从嵌套数组中读取每个员工的信息。
方法： 可以使用 DataTables 插件的 column.data 选项使用点符号提取数组中的数据。点号 (.) 用于访问 column.data 选项中的数组或子数组。以下实现演示了如何读取数组的数据。
需要使用的预编译文件有：
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
嵌套数组的结构： 以下结构包含一个员工的数据。键“name”保存名字的值 – 名字的第一个名字和姓氏，键“details”保存职位和薪水的值，随后是键“location”和“city”及其相应的值。
示例： 以下代码使用DataTable插件在HTML表中显示所有员工的数据。以下代码的JavaScript部分从“nestedSubarrays.txt”文件中提取数据。在下面的示例中， details.0 用于获取“职位(D)” 和 details.1 用于获取每个员工的“薪水”。类似地， “data”: “location” 获取特定员工的位置。
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1, maximum-scale=1,
user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width" />
<!--Datatable plugin CSS file -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<!--jQuery library file -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!--Datatable plugin JS library file -->
<script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2>
How to load data from nested
arrays in DataTables
</h2>
<!--HTML table with employee data-->
<table id="tableID" class="display"
style="width:100%">
<thead>
<!--Required column headers
for employee -->
<tr>
<th>Name</th>
<th>Location</th>
<th>Designation</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
(document).ready(function () {
/* Initialization of datatable
by table ID */
('#tableID').DataTable({
"processing": true,
/* Disabled features for not
showing extra info */
"info": false,
"ordering": false,
"paging": false,
"ajax": 'nestedSubarrays.txt',
"columns": [
// 0th index value of name
// to show firstname
{ "data": "name.0" },
{ "data": "location" },
// 0th index value of details
// to show designation
{ "data": "details.0" },
// 1st index value of details
// to show salary
{ "data": "details.1" }
]
});
});
</script>
</body>
</html>
nestedSubarrays.txt：
下面是“nestedSubarrays.txt”文件中所有员工的数据内容。
{
"data": [
{
"name": [
"Ashwini",
"Sharma"
],
"details": [
"System Architect",
"Rs.320,800"
],
"location": "chandni chowk",
"city": "Delhi"
},
{
"name": [
"Rakesh",
"Trivedi"
],
"details": [
"Solution Architect",
"Rs.420,800"
],
"location": "tellapur",
"city": "Hyderabad"
},
{
"name": [
"Ashu",
"Rana"
],
"details": [
"Accountant",
"Rs.120,100"
],
"location": "lal chowk",
"city": "Punjab"
},
{
"name": [
"Nupur",
"Joshi"
],
"details": [
"Developer",
"Rs.520,800"
],
"location": "Nallagandla",
"city": "Bangalore"
},
{
"name": [
"Jyotsna",
"Sharma"
],
"details": [
"Teacher",
"Rs.120,800"
],
"location": "New street",
"city": "Delhi"
},
{
"name": [
"Rajni",
"Singh"
],
"details": [
"System Admin",
"Rs.220,800"
],
"location": "Attapur",
"city": "Nagpur"
},
{
"name": [
"Tara",
"Sharma"
],
"details": [
"Tech lead",
"Rs.520,800"
],
"location": "chandni chowk",
"city": "Pune"
},
{
"name": [
"Ashmita",
"Sahoo"
],
"details": [
"System Lead",
"Rs.120,800"
],
"location": "chandni street",
"city": "Rajasthan"
},
{
"name": [
"Tony",
"Blair"
],
"details": [
"System Architect",
"Rs.620,800"
],
"location": "New lane",
"city": "Dharmshala"
},
{
"name": [
"Katrina",
"Kaif"
],
"details": [
"Engineer",
"Rs.320,800"
],
"location": "chandni chowk",
"city": "Mumbai"
},
{
"name": [
"John",
"Doe"
],
"details": [
"System Engineer",
"Rs.320,800"
],
"location": "Anna nagar",
"city": "Delhi"
},
{
"name": [
"Maya",
"Sharma"
],
"details": [
"Architect",
"Rs.520,800"
],
"location": "Sainikpuri",
"city": "Hyderabad"
}
]
}
注意： 假设上述文件数据模式不符合正确的JSON格式，那么它将会抛出一个DataTable插件的警告，如下所示。
warning: table id={id-of-html-table} - Invalid JSON response.
- 执行后： 以下输出显示了表格，显示了具有“System”前缀的职位（如“System Architect”、“System Lead”等）的员工的“搜索”操作。
