如何演示使用Ajax加载DataTables中的数据？

DataTables是一个现代 jQuery 插件，用于向网页的 HTML 表格添加交互式和高级控件。它是一个非常易于使用的插件，具有多种选项供开发人员根据应用程序需要进行自定义更改。该插件的功能包括分页、排序、搜索和多列排序。

在本文中，我们将演示使用DataTables插件对数据对象进行 ajax 加载。

方法：在以下示例中， DataTables使用来自普通文件的数据对象作为主要来源。表中的每一行显示一个员工信息的详细信息。

这可以通过使用DataTables插件 API的 columns.data选项来实现。
源返回一个对象数组，用于显示 HTML 表中的数据。

数据文件中数据行的结构示例如下。它简单地表示键值对中的数据，如下所示。

具有键值对的员工数据对象

需要实现的预编译文件是

CSS：

https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

JavaScript：

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

示例：以下代码演示了如何从文件“nestedData.txt”中获取员工数据对象，并使用插件显示 HTML 表中的所有行。

HTML



  

  
    
    
  
    
    
  
    
    
  
    
    

  

    
        How to demonstrate the use of Ajax 
        loading data in DataTables
    
      
    
    
        
  
            
            
                
                
                
                
                
                
            
        
    EmployeeID Name Designation Salary Address City

nestedData.txt：以下是上述 HTML 代码中使用的文件“nestedData.txt”的内容。

{
  "data": [
    {
      "employee_id": "emp1",
      "name": "Teza",
      "designation": "Architect",
      "salary": "Rs.350,800",     
      "city": "Lucknow",
      "address": "54,komal street"
    },
    {
      "employee_id": "emp2",
      "name": "Garima",
      "designation": "Accountant",
      "salary": "Rs.180,050",    
      "city": "Hyderabad",
      "address": "Hitech city,kodapur"
    },
    {
      "employee_id": "emp3",
      "name": "Ashmita",
      "designation": "Technical Author",
      "salary": "Rs.186,000",    
      "city": "Kolkatta",
      "address": "156, new park,chowk"
    },
    {
      "employee_id": "emp4",
      "name": "Celina",
      "designation": "Javascript Developer",
      "salary": "Rs.450,000",     
      "city": "Itanagar",
      "address": "chandni chowk,new lane"
    },
    {
      "employee_id": "emp5",
      "name": "Asha",
      "designation": "Accountant",
      "salary": "Rs.542,700",   
      "city": "Tokyo",
      "address": "54,Japanese colony"
    },
    {
      "employee_id": "emp6",
      "name": "Baren Samal",
      "designation": "Integration Specialist",
      "salary": "Rs.370,000",    
      "city": "New Delhi",
      "address": "48,RK puram"
    },
    {
      "employee_id": "emp7",
      "name": "Hari Om",
      "designation": "Sales Manager",
      "salary": "Rs.437,500",     
      "city": "Raipur",
      "address": "Sector 6,bhilai"
    },
    {
      "employee_id": "emp8",
      "name": "Ranu",
      "designation": "Integration Specialist",
      "salary": "Rs.330,900",     
      "city": "Tokyo",
      "address": "64,indian colony"
    },
    {
      "employee_id": "emp9",
      "name": "Celly",
      "designation": "PHP Developer",
      "salary": "Rs.275,500",    
      "city": "Secunderabad",
      "address": "23,Sainikpuri"
    },
   {
      "employee_id": "emp55",
      "name": "Ama",
      "designation": "Director",
      "salary": "Rs.985,000",    
      "city": "kanpur",
      "address": "63,Narangi lane"
    },
    {
      "employee_id": "emp56",
      "name": "Michael Jackson",
      "designation": "C++ Developer",
      "salary": "Rs.783,000",    
      "city": "Singapore",
      "address": "53,Sweetpark"
    },
    {
      "employee_id": "emp57",
      "name": "Danny",
      "designation": "Customer Support",
      "salary": "Rs.345,000",    
      "city": "Ludhiana",
      "address": "456,Punjab"
    }
  ]
}

输出：

执行代码前：

员工资料

HTML

How to demonstrate the use of Ajax loading data in DataTables