javascript - 使用 AJAX 调用填充数据表

Question

我正在处理数据表。我需要使用 AJAX 调用填充我的数据表，但我无法这样做。 这是我的 AJAX 调用:

$('#call_analysis_basic_table').DataTable ({
    "ajax": {
        "url": "getBasicCallAnalysisData.json",
        "type": "POST"
    },
    "columns": [
        { "data": "ANUMBER" },
        { "data": "BNUMBER" },
        { "data": "DATETIME" },
        { "data": "DURATION" },
        { "data": "IMEI" },
        { "data": "IMSI" },
        { "data": "CELL ID" },
        { "data": "OPR ID" },
        { "data": "MSC ID" },
        { "data": "FILE ID" }
    ]
});

数据表 HTML 代码:

<table id="call_analysis_basic_table" class="display" cellspacing="0" width="100%">
    <thead style="background-color:#4d7496;color:#fff;">
        <tr>
            <th>aNumber</th>
            <th>bNumber</th>
            <th>datetime</th>
            <th>duration</th>
            <th>imei</th>
            <th>imsi</th>
            <th>cellID</th>
            <th>oprid</th>
            <th>msc_id</th>
            <th>file_id</th>
        </tr>
    </thead>
</table>

预期 JSON 响应:

{
    "result": [
        [
            "3028540439",
            "3222027076",
            "2017-06-01 07:58:50.0",
            "984",
            "45113694289302",
            "45113694289302",
            "34546789606976",
            "410-07-511-19601",
            "1",
            "1",
            "1"
        ],
        [
            "3028540439",
            "3224712938",
            "2017-05-11 06:07:21.0",
            "4",
            "12962129644848",
            "12962129644848",
            "34469708781694",
            "410-06-651-30213",
            "1",
            "1",
            "1"
        ]
    ],
    "success": true,
    "error": "no error"
}

进行此调用后，服务器发出响应，但响应未填充到数据表中。它向我显示了这个错误

DataTables warning: table id=call_analysis_basic_table - no error

任何提示，如何将此 JSON 响应填充到我的数据表中？

Answer 1

您不必在此处使用“columns” 属性，因为您仅从数组加载数据表，而不是从正确的 JSON 响应加载数据表。此外，表中有 10 列，但每个数组中有 11 个项目，这是行不通的。如果使用数组填充表，则数组中的项目数应与表中的列数相同。 尝试使用下面的代码 -

$('#call_analysis_basic_table').DataTable ({
    "ajax": {
        "url": "getBasicCallAnalysisData.json",
        "type": "POST"
    }
});

此外，您的数据源数组应如下所示 -

{
    "result": [
        [
            "3028540439",
            "3222027076",
            "2017-06-01 07:58:50.0",
            "984",
            "45113694289302",
            "45113694289302",
            "34546789606976",
            "410-07-511-19601",
            "1",
            "1",
            "1"
        ],
        [
            "3028540439",
            "3224712938",
            "2017-05-11 06:07:21.0",
            "4",
            "12962129644848",
            "12962129644848",
            "34469708781694",
            "410-06-651-30213",
            "1",
            "1",
            "1" //extra value is here 
        ]
    ]
}

您可以在 HTML 中添加表格页脚

<table id="call_analysis_basic_table" class="display" cellspacing="0" width="100%">
    <thead style="background-color:#4d7496;color:#fff;">
        <tr>
            <th>aNumber</th>
            <th>bNumber</th>
            <th>datetime</th>
            <th>duration</th>
            <th>imei</th>
            <th>imsi</th>
            <th>cellID</th>
            <th>oprid</th>
            <th>msc_id</th>
            <th>file_id</th>
        </tr>
    </thead>
    <tfoot style="background-color:#4d7496;color:#fff;">
        <tr>
            <th>aNumber</th>
            <th>bNumber</th>
            <th>datetime</th>
            <th>duration</th>
            <th>imei</th>
            <th>imsi</th>
            <th>cellID</th>
            <th>oprid</th>
            <th>msc_id</th>
            <th>file_id</th>
        </tr>
    </tfoot>
</table>

查看此链接以获取更多引用 Jquery datatable ajax with array