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

pkln4tw6 于 2022-11-09 发布在 jQuery

关注(0)|答案(2)|浏览(194)

我一直在尝试在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" width="100%">
        <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吗？

yii

来源：https://stackoverflow.com/questions/32531750/how-to-display-json-data-in-jquery-datatables-via-ajax

2条答案

按热度按时间

k0pti3hp1#

溶液

使用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。

赞(0）回复(0）举报 2022-11-09

gcxthw6b2#

在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"

赞(0）回复(0）举报 2022-11-09

我来回答

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

2条答案

溶液

相关问题

热门标签

最新问答