jQuery Datatables列计数错误-第0行第0列请求的未知参数'0'

时间:2018-11-19 17:43:37

标签: datatables

我知道,这是一个非常普遍的问题。但是我花了将近一天的时间,因为我无法发现必须张贴的错误。谁能看到一个错误?

标记:-

<table class="table align-items-center table-flush py-3" id="inquiry-select-table">
    <thead class="thead-light">
        <tr>
            <th scope="col" style="display:none">ID</th>
            <th scope="col" style="display:none">Version</th>
            <th scope="col" style="display:none">Created Date</th>
            <th scope="col" style="display:none">Created Time</th>
            <th scope="col" style="display:none">Updated Date</th>
            <th scope="col" style="display:none">Updated Time</th>
            <th scope="col" style="display:none">Client ID</th>
            <th scope="col">Client Name</th>
            <th scope="col">Knowledge Source</th>
            <th scope="col">Description</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

JS:-

var inquirySelectTable;
var inquirySelectTableColumns = [{
        data: "id"
    },
    {
        data: "version"
    },
    {
        data: "createdDate"
    },
    {
        data: "createdTime"
    },
    {
        data: "updatedDate"
    },
    {
        data: "updatedTime"
    },
    {
        data: "clientId"
    },
    {
        data: "clientName",
        defaultContent: "",
        className: "all"
    },
    {
        data: "knowledgeSource",
        defaultContent: "",
        className: "all",
        render: function (data, type, row) {
            switch (data) {
                case 'WOM':
                    return 'Word of mouth';
                case 'PAPER':
                    return 'Paper Article';
                case 'FB':
                    return 'Facebook';
                case 'GOOGLE':
                    return 'Google Ad';
                case 'EMAIL':
                    return 'Email';
                case 'SMS':
                    return 'SMS';
                default:
                    return 'Other'
            }
        }
    },
    {
        data: "description",
        defaultContent: "",
        className: "all"
    }
];

var inquiryColumnDefs = [{
    "targets": [0, 1, 2, 3, 4, 5, 6],
    "visible": false,
    "searchable": false
}];

var tableSizeFromFive = [
    [5, 10, 15, 25 - 1],
    [5, 10, 15, 25, "All"]
];

$(document).ready(function () {
    inquirySelectTable = $('#inquiry-select-table').DataTable({
        pagingType: "numbers",
        responsive: true,
        lengthMenu: tableSizeFromFive,
        columnDefs: inquirySelectTableColumns,
        columns: inquiryColumnDefs,
    });

    $.get("inquiries/getAllInquiries", function (data, status) {
        console.log(data);
        setGridData(inquirySelectTable, data);
    });
});

function setGridData(table, data) {
    table.clear();
    table.rows.add(data).draw();

    if (table.data().count() > 0) {
        $(".table-responsive").removeClass("disabled");
    } else {
        $(".table-responsive").addClass("disabled");
    }
}

从服务器接收的数据:-

JSON Response

我得到的错误是:-

Datatables error

根据https://datatables.net/manual/tech-notes/4,由于我将Integer作为参数,这意味着列数与行数不匹配。但是对我来说似乎还可以。有人看到我错过的东西吗?

1 个答案:

答案 0 :(得分:1)

好像您已经交换了columnDefscolumns

columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,

互换它们,它将正常工作:

columnDefs: inquiryColumnDefs,
columns: inquirySelectTableColumns,

示例叉子: http://jsfiddle.net/bsf69o04/