我们非常熟悉用于存储相关数据的 HTML 表格。 DataTables是一个现代 jQuery 插件,用于向我们网页的 HTML 表格添加交互式和高级控件。 DataTables 的一些功能是对数据进行排序、搜索、分页和排序。有许多方法可以将数据放入 DataTables。
在本文中,我们将学习从准备好分页或排序的 DataTables 中的文本文件加载数据。
实现代码所需的预编译文件是
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
例子:
HTML
Datatables server side process
StudentID
StudentName
Age
Gender
Marks Scored
StudentID
StudentName
Age
Gender
Marks Scored
ajaxData.txt:以下是用于写入“ajaxData.txt”文件学生表,其在上面的代码的JavaScript部分中使用的数据。
{
"data": [
[
"ST1",
"Preeti",
"35",
"Female",
"320"
],
[
"ST2",
"Vincy",
"36",
"Female",
"170"
],
[
"ST3",
"Ashwini",
"41",
"Female",
"860"
],
[
"ST4",
"Kelly",
"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"
]
]
}
输出:
从文件加载的数据:
搜索和分页执行: