使用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警告：表格ID = call_analysis_basic_table-没有错误

有什么提示，如何将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与数组