首页 > 解决方案 > jQuery Datatables 列计数错误 - 请求第 0 行第 0 列的未知参数“0”

问题描述

这是一个很常见的问题,我知道。但是我花了将近一天的时间,因为我无法发现我必须发布的错误。任何人都可以看到错误吗?

标记:-

<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 响应

我得到的错误是: -

数据表错误

根据https://datatables.net/manual/tech-notes/4,由于我得到一个整数作为参数,这意味着列数与行数不匹配。但这对我来说似乎没问题。有人看到我错过的东西吗?

标签: datatables

解决方案


好像你已经交换columnDefscolumns

columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,

交换它们,它会正常工作:

columnDefs: inquiryColumnDefs,
columns: inquirySelectTableColumns,

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


推荐阅读