时间戳

首页 > 解决方案 > 使用 Ajax 的数据表

javascript - 使用 Ajax 的数据表

问题描述

我是 dataTabels 的新手，我正在尝试从 json txt 文件（test1.txt）中获取数据。这是其中的一部分（只有 4 个），但我有 +5000：

[{"0":"22352442","ID":"22352442","1":"22126303","PARENT":"22126303","2":"2813340","TASK_ID":"2813340","3":"2667252","CHILD_ID":"2667252","9":"Shawne Walthall","LEAD":"Shawne Walthall","11":"RP ~217' cable- PL 8 YPSIL","DESCRIPTION":"RP ~217' cable- PL 8 YPSIL","12":"PD-SW-ANN","WORKLOCATION":"PD-SW-ANN","13":"IC","TASKTYPE":"IC","14":"HOLD","STATUS":"HOLD","15":"INFLD","C_STATUS":"INFLD","16":"Scheduled","CLASSIFICATION":"Scheduled","18":"RFW672917A11 INSTALL CABLE - 05-181","TASK_DESCRIPTION":"RFW672917A11 INSTALL CABLE - 05-181","19":"Overload","TYPE_OF_WORK":"Overload","20":"16-NOV-06","TS":"16-NOV-06","21":"24-JAN-11","TC":"24-JAN-11"},{"0":"27364695","ID":"27364695","1":"27364637","PARENT":"27364637","2":"11949147","TASK_ID":"11949147","3":"11949089","CHILD_ID":"11949089","11":"08-036 Design System Cable NF 52R Howard","DESCRIPTION":"08-036 Design System Cable NF 52R Howard","12":"PD-SE-TBY","WORKLOCATION":"PD-SE-TBY","13":"TC","TASKTYPE":"TC","14":"WAPPR","STATUS":"WAPPR","15":"INFLD","C_STATUS":"INFLD","16":"Scheduled","CLASSIFICATION":"Scheduled","18":"TEST CABLE","TASK_DESCRIPTION":"TEST CABLE"},{"0":"28728012","ID":"28728012","1":"28728001","PARENT":"28728001","2":"31575951","TASK_ID":"31575951","3":"31575940","CHILD_ID":"31575940","9":"Clifton Manus","LEAD":"Clifton Manus","11":"08-098, Design\/Construct System Cable","DESCRIPTION":"08-098, Design\/Construct System Cable","12":"PD-SE-TBY","WORKLOCATION":"PD-SE-TBY","13":"IC","TASKTYPE":"IC","14":"APPR","STATUS":"APPR","15":"INFLD","C_STATUS":"INFLD","16":"Scheduled","CLASSIFICATION":"Scheduled","18":"08-097, INSTALL CABLE","TASK_DESCRIPTION":"08-097, INSTALL CABLE","19":"Reliability","TYPE_OF_WORK":"Reliability","20":"12-AUG-08","TS":"12-AUG-08","21":"12-AUG-17","TC":"12-AUG-17"},{"0":"28728014","ID":"28728014","1":"28728001","PARENT":"28728001","2":"31575953","TASK_ID":"31575953","3":"31575940","CHILD_ID":"31575940","11":"08-098, Design\/Construct System Cable","DESCRIPTION":"08-098, Design\/Construct System Cable","12":"PD-SE-TBY","WORKLOCATION":"PD-SE-TBY","13":"TC","TASKTYPE":"TC","14":"WAPPR","STATUS":"WAPPR","15":"INFLD","C_STATUS":"INFLD","16":"Scheduled","CLASSIFICATION":"Scheduled","18":"TEST CABLE","TASK_DESCRIPTION":"TEST CABLE","19":"Reliability","TYPE_OF_WORK":"Reliability","20":"12-AUG-08","TS":"12-AUG-08","21":"12-AUG-08","TC":"12-AUG-08"}]

大约有21列。如何将其分配给我的数据表中的列？这是我的数据表脚本：

var dataTables = $('#myTable').DataTable({
    ajax: "test1.txt",
    deferRender: true,
    bPaginate: true,
    select: {
        style: 'multi'
    },
    aLengthMenu: [[100, 200, 500, -1], [100, 200, 500, "All"]],
    pageLength: 100});

标签： javascriptjqueryjsonajaxdatatable

解决方案

在数据表初始化中进行这些更改。

ajax: {
    url: "test1.txt",
    dataSrc: ''
},

消除columns: [ ]

然后，您将需要格式化您的 json 文本文件，例如

[
    {
        "0" : "value of 1st column of 1st record",
        "1" : "value of 2nd column of 1st record",
        ...
        ...
        upto 21 column
    },
    {
        "0" : "value of 1st column of 2nd record",
        "1" : "value of 2nd column of 2nd record",
        ...
        ...
        upto 21 column
    }
]

试试这个，看看它是否有效。

如果要隐藏列，请将其添加到数据表中

"columnDefs": [
            {
                "targets": [ 0, 1 ],
                "visible": false,
                "searchable": false
            }
        ]

Where0, 1代表你的列索引。0 第一列，1 第二列 输入要隐藏的列的这些索引号。

新更新 在动态 json 文件的情况下，您将需要使用第一种方法使用 columns 提及您想在 columns 键中显示的列，如下所示

$('#myTable').DataTable( {
    "ajax": {
        url: "test1.txt",
        dataSrc: ''
    },
    "columns": [
        { "data": "C1" },
        { "data": "C2" }
    ]
});

然后你的 json 文本文件会像

[{"C1":"22352442","C2":"22126303","KEY":"NO SHOW"}, {"C1":"22352442","C2":"22126303", "KEY":"NO SHOW"}]

您的第一个 json 现在可以在这种情况下使用。

推荐阅读