📌  相关文章
📜  如何从文本文件中加载 DataTables 中的 JSON 数据进行分页?

📅  最后修改于: 2021-11-25 04:02:08             🧑  作者: Mango

我们非常熟悉用于存储相关数据的 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

                                                                                                                                                                                                                                                                                   
StudentIDStudentNameAgeGenderMarks Scored
StudentIDStudentNameAgeGenderMarks 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"
        ]
    ]
}

输出:

从文件加载的数据:

搜索和分页执行: