如何通过 Ajax 在 jQuery DataTables 中显示 JSON 数据？

Posted 2023-03-05

【中文标题】如何通过 Ajax 在 jQuery DataTables 中显示 JSON 数据？

【英文标题】：How to display JSON data in jQuery DataTables via Ajax?

【发布时间】：2015-12-08 12:05:33

【问题描述】：

我一直在尝试在 jQuery DataTables 组件中获取我的 JSON 数据。

首先我编写了一个 javascript 和一个视图，如下所示：

$.fn.dataTable.Editor(
    ajax: "http://localhost/example22/index.php?r=site/display",
    table: "#example",
    fields: [
        label: "Name:",
        name: "name"
    , 
        label: "Designation:",
        name: "designation"
    , 
        label: "Address:",
        name: "address"
    , 
        label: "Salary:",
        name: "salary"
    ]
);

$('#example').DataTable(
    lengthChange: false,
    ajax: "http://localhost/example22/index.php?r=site/display",
    columns: [
        allk: "name"
    , 
        allk: "designation"
    , 
        allk: "address"
    , 
        allk: "salary"
    ],
    select: true
);

和类似的视图

<table id="example" class="table table-striped table-bordered" cellspacing="0" >
        <thead>
            <tr>
                <th>Name</th>
                <th>Designation</th>
                <th>Address</th>
                <th>Salary</th>
            </tr>
        </thead>
</table>

并且提供的url分别包含以下JSON数据

    "allk": [
        
            "name": "raju",
            "designation": "developer",
            "address": "he is from viswasapuram",
            "salary": "30000"
        ,
        
            "name": "bob",
            "designation": "designer",
            "address": "no idea",
            "salary": "100000"
        ,
        
            "name": "bob",
            "designation": "designer",
            "address": "no idea",
            "salary": "100000"
        ,
        
            "name": "suresh",
            "designation": "designer",
            "address": "fffswss",
            "salary": "1212"
        ,
        
            "name": "john",
            "designation": "designer",
            "address": "california",
            "salary": "3000000"
        ,
        
            "name": "suresh",
            "designation": "tester",
            "address": "he is from cheeran maanagar",
            "salary": "20000"
        
    ]

有人可以帮助我了解如何在此应用程序中使用 DataTables 吗？

【参考方案1】：

解决方案

使用ajax.dataSrc 选项在您的 JSON 响应中指定保存数据的属性。

例如：

$('#example').DataTable(
   // ... skipped other options ...
   ajax: 
       url: "http://localhost/example22/index.php?r=site/display",
       dataSrc: 'allk'
   ,
   columns: [
        data: "name", 
        data: "designation", 
        data: "address" , 
        data: "salary"
   ]
);

演示

有关代码和演示，请参阅 this jsFiddle。

【参考方案2】：

在 Nodejs 中，当你有一个像这样声明的 DataTable 时

<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Parents Name</th>
            <th>Age</th>
        </tr>
    </thead>
</table>

那么你的java脚本应该是这样的

$(document).ready(function() 
    $("#example").DataTable(
        ajax: 
            url: "../kidsinfo",
            dataSrc: ""
        ,
        columns: [
             data: "kid_name" ,
             data: "class" ,
             data: "parents_name" ,
             data: "age" ,           
        ],          
        iDisplayLength: 1,
        iDisplayStart: 0
    );
);

这里需要注意的重要一点是你的服务器的json数据是这样的

["id":1,"kid_name":"John","class":"Hancock","parents_name":"dharam","age":"21"]

那么您的 javascript 代码应使用收到的 json 数据中的名称 kid_name 来关联您要在列中显示的信息。

如果来自服务器的json数据是这样的

    "info": [
        "id": 1,
        "kid_name": "John",
        "class": "Hancock",
        "parents_name": "dharam",
        "age": "21"
    ]

那么你的java脚本应该有dataSrc: "info"