一、简介
DataTables是一个功能强大的Javascript库,用于向HTML表中添加交互特性,虽然简单性是整个项目的核心设计原则,但一开始可能会让人望而生畏。然而,采取这些第一步,让DataTables在你的网站上运行实际上是相当直接的,因为你只需要在你的页面中包含两个额外的文件:
依赖:JQuery 1.7+
二、引入
2.1 CDN
CDN是一个内容分发网络,它有边缘服务器,可以向web浏览器提供极低延迟的媒体文件,当用户从CDN接收文件时,浏览器将缓存它以供重用。这意味着使用相同Javascript库的不同站点可以共享很大的性能改进,因为浏览器不需要为每个站点从不同的服务器下载相同的文件。
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
当然也可以将文件下载到本地,引入本地的文件,例如:
<link rel="stylesheet" href="/DataTables/datatables.css" />
<script src="/DataTables/datatables.js"></script>
2.2 npm/Node.js
datatable及其扩展可以作为NPM包获得。包的基本名称是datatable .net,扩展和样式集成选项可以作为单独的包获得——有关可用包的详细信息,请参阅NPM安装指南。
npm i datatables.net-dt
调用
import DataTable from 'datatables.net-dt';
let table = new DataTable('#myTable', {
// config options...
});
三、DataTable
3.1 Initialising
$(document).ready(function() {
$('#myTable').DataTable()
})
DataTable通过调用DataTable()
函数,增强表格的样式和功能。该函数可以拥有一个参数,用于增强表格的功能。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<title>Document</title>
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$('#myTable').DataTable()
});
</script>
</body>
</html>
3.2 Data
数据是复杂的,所有的数据都是不同的。因此,DataTables具有丰富的选项,可用于配置如何获取要在表中显示的数据,以及如何处理该数据。
在数据表处理数据的方式中,有三个核心概念,我们将在本页详细讨论:
- 处理模式
- 数据类型
- 数据源
3.2.1 处理模式
DataTables有两种不同的数据处理模式(排序、搜索等):
- 客户端处理:完整的数据集预先加载,数据处理在浏览器中完成。
- 服务器端处理:每次重绘表都会发出一个Ajax请求,只返回每次显示所需的数据。数据处理在服务器端进行。
3.2.2 数据类型
用于DataTable的主数据源必须始终是一个数组(它在使用DOM源数据时自动创建)。该数组中的每个项将定义要显示的行,DataTables可以使用三种基本Javascript数据类型作为行的数据源:
- 数组
- 对象
- 实例
3.2.2.1 数组
数组形式是DataTable
最常用的选项,也是使用最简单的,它要求数组的列要与表格的列数量保持一致。示例:
var data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
]
初始化表格
$('#example').DataTable({
data: data
})
3.2.2.2 对象
对象的直观使用与数组略有不同。如果您积极地通过API处理数据,对象可以使获取特定的数据非常容易,因为您只需要使用属性名,而不必记住数据所在的数组索引(例如data.name,而不是data[0])。
对象还可以包含比DataTable显示所需更多的信息,这对于操作数据非常有用(例如,包括对最终用户不可见的数据库主键)。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<title>Document</title>
</head>
<body>
<table id="example" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
<th>salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function() {
let data = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
$('#example').DataTable({
data: data,
columns : [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
})
})
</script>
</body>
</html>
3.2.2.3 实例
让数据表显示来自Javascript对象实例的信息可能非常有用,因为这些实例定义了可用于更新数据的抽象方法。例如,你可能有一个Employee类,或者一个Car类,等等,这取决于你要建模的数据。在数据表中使用实例的方式与使用对象非常相似——只需传入对象并将方法或属性名称指定给columns.data
为每列的数据。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<title>Document</title>
</head>
<body>
<table id="example" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
<th>salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function() {
function Employee ( name, position, salary, office ) {
this.name = name;
this.position = position;
this.salary = salary;
this._office = office;
this.office = function () {
return this._office;
}
}
$('#example').DataTable({
data: [
new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
],
columns : [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
})
})
</script>
</body>
</html>
3.2.3 数据源
有了现在定义的处理模式和数据类型的概念,我们可以考虑DataTables
实际上是如何获得要操作的数据的。DataTables将在表中显示的数据有三个基本来源:
- DOM
- JavaScript
- Ajax
3.2.3.1 DOM
在DataTable启动去增强表格时,会首先去判断是否存在数据,若存在数据则会抛弃data
和ajax
属性传递的数据。同时DataTable也可以配合HTML5的data-*
属性,自定义属性可以为表格提供排序和搜索的依赖数据。
例如,现有一个时间数据21st November 2016
,如果想对他进行排序,会自动按字符串进行比较,无法做到按时间排序,所以我们可以为该单元格添加一个data-order
属性,将时间数据转化为一个易于比较的值例如时间戳1479686400
,这样再进行排序时就会按data-order
的值进行排序。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<title>Document</title>
</head>
<body>
<table id="example" class="display">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$1,120</td>
<td data-order="1479686400">21st November 2016</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$1,120</td>
<td data-order="1483977600">10th January 2017</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$1,120</td>
<td data-order="959616000">30th May 2000</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable()
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxKj8hcN-1684919242937)(assets/image-20230420112953697.png)]
这里可以看到,再对date字段进行排序时,就会按真实时间进行排序。
3.2.3.2 JavaScript
可以使用数据初始化选项指示datatable使用给定给它的数据。这些数据可以是数组、对象或实例的形式(见上文),并且可以从任何你想要的地方获取!只要Javascript可以访问数据,就可以将其发送到数据表。
这个方法在广泛使用DataTables API时特别有用,特别是row.add()
和row().remove()
方法可以用于动态地从表中添加和删除数据,同样可以从您希望选择的任何来源添加和删除数据。
3.2.3.3 Ajax
Ajax源数据与Javascript源数据非常相似,但datattables将通过Ajax调用为您获取数据。从特定脚本中获取表数据通常非常有用,从而将检索数据的逻辑与显示分离开来。数据表中的Ajax源数据由Ajax选项控制。最简单的形式是将属性值设置为字符串,指向要从中加载数据的URL。
DataTable可以使用columns.data
或columns.render
对数据进行预处理,这里包含了4个属性:
display
:显示值sort
:排序值filter
:搜索值type
:类型检测
例如现在有一下数据:
{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh"
}
针对于字段start_date
,我们想要它显示display
的值,而排序时按照timestamp
的值进行排序,这里就可以用到columns.render
属性,例如:
$('#example').DataTable({
columns: [
{
data: 'start_date',
render: {
_: 'display',
sort: 'timestamp'
}
}
]
})
在datatable中使用数据渲染的主要优点是可以修改输出数据而不修改原始数据。columns.data
可用于获取和设置数据,但设置操作增加了显著的复杂性,建议使用columns.data
选项仅用于指向数据的原始表示,并允许渲染(columns.render)转换数据。
例如现有一个较长的文本,需要对其进行截断就可以使用columns.render
的函数形式
$('#example').DataTable({
columns: [
{
data: 'description',
render: function(data, type, full) {
return data.subString(0, 15) + '...'
}
}
]
})
3.3 Ajax
使用Ajax加载数据的另一个好处是,您可以启用DataTables
的deferRender
选项来提高性能——启用该选项后,只在需要在页面上绘制DOM元素时才会创建DOM元素,从而减少数据首次插入表时的初始CPU负载。
示例:
$('#example').DataTable({
ajax: {
url: '/api/myData'
}
})
当考虑到数据表的Ajax加载数据时,我们几乎总是指的是JSON有效负载——也就是说,从服务器返回的数据是JSON数据结构。这是因为JSON是从Javascript派生的,因此它很自然地与Javascript库(如datattables)配合得很好。它也是一种紧凑且易于理解的数据格式,已被证明在Javascript世界中非常流行。
数据表可以使用其他数据格式,如XML和YAML,尽管这些格式需要在使用之前转换为Javascript对象表示法(即JSON) -这通常在使用ajax.dataSrc
中完成。本文的其余部分将只考虑JSON。
ajax.dataSrc
也可以获取对象结构中想要的数据,例如:
// myData.json
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
...
]
$('#myTable').DataTable( {
ajax: {
url: '/api/myData',
dataSrc: ''
},
columns: [ ... ]
} );
当所需要的数据写在data
属性中时,可以在dataSrc
中写明数据源,也可以不写,因为DataTable默认的数据源就是data
,例如:
// myData.json
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
...
]
}
$('#myTable').DataTable( {
ajax: {
url: '/api/myData',
dataSrc: ''
// dataSrc: 'data'
},
columns: [ ... ]
} );
若数据放在其他属性中时,就需要在dataSrc中写明数据源,例如:
// myData.json
{
"staff": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
...
]
}
$('#myTable').DataTable( {
ajax: {
url: '/api/myData',
dataSrc: 'staff'
},
columns: [ ... ]
} );
在获取数据源之后,要让数据显示在列的位置,就需要在columns
中指定每一列的数据。
当数据源为数组时可以使用索引来标注数据出现的列,例如:
// myData.json
[
"Tiger Nixon",
"System Architect",
"$320,800",
"2011/04/25",
"Edinburgh",
"5421"
]
$('#myTable').DataTable( {
ajax: { ... },
columns: [
{ data: 0 },
{ data: 1 },
{ data: 2 },
{ data: 3 },
{ data: 4 },
{ data: 5 }
]
} );
对于一个对象,可以直接获取它的key值,标注所在的列,例如:(略)
对于一个多级的对象结构,在这种情况下,请注意,在嵌套对象中,我们使用点点对象表示法,如hr.position
访问嵌套数据的位置。有了这个功能,几乎任何JSON数据结构都可以与数据表一起使用。
// myData.json
{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25"
},
"contact": {
"office": "Edinburgh",
"extn": "5421"
}
}
$('#myTable').DataTable( {
ajax: ...,
columns: [
{ data: 'name' },
{ data: 'hr.position' },
{ data: 'hr.salary' },
{ data: 'hr.state_date' },
{ data: 'contact.office' },
{ data: 'contact.extn' }
]
} );
3.4 Options
DataTables的大量选项可用于定制它将向最终用户呈现界面和可用功能的方式。这是通过它的配置选项完成的,这些选项是在初始化时设置的。
这里可以使用paging
选项控制是否分页,使用scrollY
控制表格的高度,超过此高度后显示滚动条等等,具体可以查看官方的配置参考。
示例:
$('#example').DataTable({
paging: false,
scrollY: 400
})
这个案例在配置中禁用了分页,并且设置表格高度为400,超过400自动显示滚动条。
3.4.1 Non-jQuery Option
在初始化表格时,可以调用new DataTable()
的构造函数,在第二个参数中进行配置。例如:
new DataTable('#example', {
paging: false,
scrollY: 400
})
3.4.2 HTML5自定义属性
从v1.10.5开始,数据表也可以使用从HTML5 data-*
属性中读取的初始化选项。这提供了一种直接在HTML中设置选项的机制,而不是使用Javascript(如上所述)。考虑以下表格的例子:
<table data-order='[[ 1, "asc" ]]' data-page-length='25'>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th data-class-name="priority">Salary</th>
</tr>
</thead>
</table>
当表格在初始化时,会自动读取表格中的data-*
的属性,并自动添加到配置中,在使用时有两点需要注意:
3.4.3 默认设置
在使用多个数据表的项目中,将初始化默认值设置为通用值通常是有用的(例如,您可能希望将dom选项设置为通用值,以便所有表获得相同的布局)。这可以使用$.fn.datatable.defaults
对象来完成。该对象采用与DataTables初始化对象相同的所有参数,但在这种情况下,您将为所有未来的DataTables初始化设置默认值。
示例:
// Disable search and ordering by default
$.extend( $.fn.dataTable.defaults, {
searching: false,
ordering: false
} );
// For this specific table we are going to enable ordering
// (searching is still disabled)
$('#example').DataTable( {
ordering: true
} );
在这个案例中,默认情况下,排序和搜索都是被禁用的,但在初始化表格时,重写该属性后,也可以重新启用该属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qedXEWUa-1684919242938)(assets/image-20230421110304062.png)]
3.4.4 扩展
许多DataTables扩展也可以通过DataTables配置对象进行配置,初始化扩展并根据需要进行配置。可用的属性取决于所使用的扩展,必须加载扩展Javascript才能使这些选项生效。
具体查看DataTable Extensions。
3.5 API
datatable及其扩展有一个广泛的API,可以用来访问表中包含的数据,或者在初始化完成后操作表。DataTables API旨在反映表中数据的结构,以及您通常希望与表交互的方式。因此,API由六个关键区域组成,用于处理表及其数据:
- Tables
- Columns
- Rows
- Cells
- Core
- Utilities
这里引入三个概念
- 实例(Instance):API的实例是单个对象实例,它引用一组特定的DataTable表
- 结果集(Result Set):API实例持有的数据。DataTables API实例是类似于数组的,因为它们以与普通Javascript数组相同的方式保存数据(因此可以使用array[]表示法访问),并且具有许多相同的方法可用(例如
sort()
和push()
)。这与jQuery本质上类似数组的方式非常相似。 - 上下文(Context):API实例的上下文描述了API实例链接到的数据表。每个API实例可以引用一个或多个DataTables表,并具有对这些表进行操作的能力。
3.5.1 创建API实例
创建一个API有4种方法:
$( selector ).DataTable();
$( selector ).dataTable().api();
new $.fn.dataTable.Api( selector );
new DataTable( selector, options );
每个结果都是DataTables API对象的一个实例,其中包含选择器在其上下文中找到的表。
这里需要注意的是第一种方法和第二种方法的区别,$( selector ).DataTable()
返回的是一个API实例,但是$( selector ).dataTable()
返回的是jQuery对象。
示例:
let table = $('#example').DataTable()
console.log(table)
通过控制台输出结果可以看到该表格的API信息。
当使用dataTable()
函数时:
let table = $('#example').dataTable()
console.log(table)
3.5.2 连接(Chaining)
DataTable的大部分API都可以返回相同的API实例,所以如果需要调用多个API,可连接使用,例如:
var table = $('#example').DataTable();
table.search( 'Fiona' ).draw();
DataTables API与jQuery的链接方法不同之处在于,DataTables使用嵌套的方法和属性。例如ajax.json()
,json()
方法是ajax
属性的子方法。这使得API在如何访问数据方面非常具有表现力,方法与之前调用的方法相关。
例如:
var table = $('#example').DataTable( {
ajax: "data.json"
} );
table.on( 'xhr', function () {
var json = table.ajax.json();
alert( json.data.length +' row(s) were loaded' );
} );
当程序请求成功后,就可以通过ajax.json()
获取请求数据。
API的所有顶级方法在API的所有嵌套级别上都是可用的。例如方法draw()
就可以写在所有API方法之后,table.search( 'Fiona' ).draw()
。
3.6 Style
以适合您设计的方式对DataTables增强表进行样式设置是很重要的,这样表就可以无缝地与您的站点/应用程序的其余部分相匹配。为此,DataTables提供了许多表样式设置选项,从默认的DataTables样式表(具有许多内置可选功能)到与一些最广泛使用的CSS框架集成。
3.6.1 Bootstrap 5
Bootstrap 5是下一的CSS框架,它可以让您快速轻松地构建具有统一外观和感觉的用户界面。DataTables提供了与Bootstrap 5的完全集成,因此您的DataTables将与您站点的其他部分匹配相同的外观和感觉。
这里需要引入以下文件获取支持
根据Bootstrap 5的开发文档,可以对表格样式进行增强。示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<title>Document</title>
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script>
$(document).ready(function() {
let table = $('#example').DataTable({
ajax: {
url: 'data.json'
},
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary' },
],
})
})
</script>
</body>
</html>
3.7 Events
了解DataTables或它的一个扩展何时执行了特定操作(例如绘制页面)通常是有用的,这样就可以更新其他相关元素以考虑更改。为了提供这种能力,DataTables将触发自定义DOM事件,这些事件可以被监听,然后使用on()方法或jQuery的on()方法进行操作。DataTables的自定义事件的工作方式与标准DOM事件完全相同,并允许事件驱动的操作,这对插件特别有用。
有关DataTables及其扩展将触发的事件的完整列表,请参阅事件参考文档。
3.7.1 监听事件
如上所述,您可以使用on()
或jQuery的on()
方法来监听事件。on()
的工作方式与$().on()
完全相同,提供了名称空间和多个事件。
示例:
var table = $('#example').DataTable();
table.on( 'draw', function () {
alert( 'Table redrawn' );
} );
或者也可以写成
$('#example').on( 'draw.dt', function () {
alert( 'Table redraw' );
} );
两种写法都可以实现相同的效果,在这个案例中,jQuery的on()
方法,是必须在命名空间后追加dt
的。
3.7.2 移除事件
我们可以通过on()
方法为DataTable添加事件,也可以调用off()
或者jQuery的$().off()
方法移除事件。如果是单一的事件触发,可以使用one()
或者是$().one()
方法,该事件就会在触发一次后移除该事件。
3.7.3 事件冒泡
与典型的DOM事件一样,DataTables自定义事件会在文档中冒泡出现,因此您可以使用$().on()
的委托形式或在DOM树中更高位置的其他元素侦听事件。