DataTables是一个现代 jQuery 插件，用于向网页的 HTML 表格添加交互式和高级控件。在本文中，我们将学习使用 DataTables 实现分页。其他功能包括排序和多列排序。
实现代码所需的预编译文件是
CSS：
JavaScript：
示例 1：以下示例演示使用 DataTables 的分页。在 HTML 部分，定义了一个包含学生数据的表格。 JavaScript 处理 DataTable 的初始化。
HTML
Pagination using jQuery Datatables
StudentID
StudentName
Age
Gender
Marks Scored
ST1
Prema
35
Female
320
ST2
Wincy
36
Female
170
ST3
Ashmita
41
Female
860
ST4
Kelina
32
Female
433
ST5
Satvik
41
male
162
ST6
William
37
Female
372
ST7
Chandan
31
male
375
ST8
David
45
male
327
ST9
Harry
29
male
205
ST10
Frost
29
male
300
ST11
Ginny
31
male
560
ST12
Flod
45
Female
342
ST13
Marshy
23
Female
470
ST13
Kennedy
43
male
313
ST14
Fiza
31
Female
750
ST15
Silva
34
male
985
Javascript
$(document).ready(function() {
/* marksscored is sorted in descending */
$('#tableID').DataTable({
order: [[ 4, 'desc' ]]
});
});Javascript
$(document).ready(function() {
/* To hide column 2 and 3 */
$('#tableID').DataTable( {
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false
}
]
} );
} );输出：
- 执行前：
- 执行后：
示例 2：应在上述 HTML 代码的 JavaScript 部分中实现以下代码片段。它演示了插件选项的设置，以按降序显示学生的分数。
Javascript
$(document).ready(function() {
/* marksscored is sorted in descending */
$('#tableID').DataTable({
order: [[ 4, 'desc' ]]
});
});
输出：
示例 3：以下代码片段演示了隐藏上述学生表的某些选定列。在第一个 HTML 示例代码的 JavaScript 部分中包含以下代码段。
Javascript
$(document).ready(function() {
/* To hide column 2 and 3 */
$('#tableID').DataTable( {
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false
}
]
} );
} );
输出：
