jQuery Ошибка столбца Datatables - запрошенный неизвестный параметр '0' для строки 0, столбца 0

Question

Это очень распространенный вопрос, я в курсе.Но я провел почти день, потому что я не могу определить ошибку, я должен опубликовать это.Кто-нибудь может увидеть ошибку?

Разметка: -

<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");
    }
}

Данные, полученные с сервера: -

Я получаю ошибку: -

Согласно https://datatables.net/manual/tech-notes/4, поскольку в качестве параметра я получаю целое число, это означает, что количество столбцов не совпадает с количеством строк.Но мне кажется, это нормально.Кто-нибудь видит то, что я пропустил?

Answer 1

Похоже, вы поменялись местами columnDefs и columns:

columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,

Поменяйте местами их и все будет работать нормально:

columnDefs: inquiryColumnDefs,
columns: inquirySelectTableColumns,

Пример fork: http://jsfiddle.net/bsf69o04/