如何从文本文件中加载 DataTables 中的 JSON 数据进行分页？

我们非常熟悉用于存储相关数据的 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 ScoredStudentIDStudentNameAgeGenderMarks Scored
  
    
      
        /* Initialization of datatable */
        $(document).ready(function () {
  
            /* Student's data loaded from 
            text file */
            $('#tableID').DataTable({
                "ajax": 'ajaxData.txt'
            });
        });
    

  

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

输出：

从文件加载的数据：

搜索和分页执行：