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

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

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

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

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

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

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

具有键和值对的雇员数据对象

实施时需要的预编译文件有

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表中显示所有行。

<!DOCTYPE html>
<html>
  
<head>
  
    <meta content="initial-scale=1, maximum-scale=1, 
        user-scalable=0" name="viewport" />
    <meta name="viewport" content="width=device-width" />
  
    <!-- Datatable plugin CSS file -->
    <link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
  
    <!-- jQuery library file -->
    <script type="text/javascript" 
        src="https://code.jquery.com/jquery-3.5.1.js">
    </script>
  
    <!-- Datatable plugin JS library file -->
    <script type="text/javascript" src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
    </script>
</head>
  
<body>
    <h2>
        How to demonstrate the use of Ajax 
        loading data in DataTables
    </h2>
      
    <!-- HTML table with employee data -->
    <table id="tableID" class="display" style="width:100%">
        <thead>
  
            <!-- Column headers with employee data -->
            <tr>
                <th>EmployeeID</th>
                <th>Name</th>
                <th>Designation</th>
                <th>Salary</th>
                <th>Address</th>
                <th>City</th>
            </tr>
        </thead>
    </table>
  
    <script>
  
        /* Initialization of datatable */
         $(document).ready(function () { /* Datatable access by using table ID */$ ('#tableID').DataTable({
                "info": false,
  
                /* Set pagination as false or 
                true as per need */
                "paging": false,
                  
                /* Name of the file source 
                for data retrieval */
                "ajax": 'nestedData.txt',
                "columns": [
  
                    /* Name of the keys from 
                    data file source */
                    { "data": "employee_id" },
                    { "data": "name" },
                    { "data": "designation" },
                    { "data": "salary" },
                    { "data": "address" },
                    { "data": "city" }
                ]
            });
        });
    </script>
</body>
  
</html>

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

输出:

在执行代码之前：

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