Question

我主要使用jQuery和DataTables

制作表格

我在拨打$('#dataTable').dataTable();时收到错误但我不知道为什么会发生这种情况，因为I see my table correctly displayed 但是DataTable脚本不起作用，所以表保持正常，而不是分页等......

这是错误：

jquery.dataTables.js:1197 Uncaught TypeError: Cannot read property
'mData' of undefined
 at HTMLTableCellElement.<anonymous> (jquery.dataTables.js:1197)
 at Function.each (jquery-1.9.1.js:648)
 at init.each (jquery-1.9.1.js:270)
 at HTMLTableElement.<anonymous> (jquery.dataTables.js:1194)
 at Function.each (jquery-1.9.1.js:648)
 at init.each (jquery-1.9.1.js:270)
 at init.DataTable [as dataTable] (jquery.dataTables.js:869)
 at DisplayTable (accounts.js:19)
 at TypesChanged (accounts.js:168)
    at HTMLDocument.<anonymous> (accounts.js:171)

HTML：

<div class="table-responsive">
    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
        <thead class="dataTableHead">
        <tr>
            <%--JSON ARRAY CREATES THE TABLE--%>
        </tr>
        </thead>
        <tfoot class="dataTableFooter">
        <tr>
            <%--JSON ARRAY CREATES THE TABLE--%>
        </tr>
        </tfoot>
        <tbody class="dataTableBody">
        <%--JSON ARRAY CREATES THE TABLE--%>
        </tbody>
    </table>
</div>

的JavaScript

 var types = [];
    var amountOfDayEnds = parseInt($('#amountOfDayEnds').val());


        function TypesChanged() {
        selectedGroup = $('#group').val();
        switch (selectedGroup) {
            case "DDA":
                types = ["400","4044","4045"];
                break;
            case "SAV":
                types = ["300","310"];
                break;
            case "MTG":
                types = ["700","710"];
                break;
        }
        console.log("Selected group: " + selectedGroup + ", Types: " + types);
        $('.dataTableHead').empty();
        $('.dataTableFooter').empty();
        $('.dataTableHead').append('<th class="text-center">Day</th>');
        $('.dataTableFooter').append('<th class="text-center">Day</th>');
        var columnNames = [];
        $.each(types, function (index, value) {
            columnNames += '<th class="text-center">Type ' + value + '</th>';
        });
        $('.dataTableHead').append(columnNames);
        $('.dataTableFooter').append(columnNames);
        DisplayTable();
    }

    TypesChanged();

    function DisplayTable() {
        var data;
        //Table
        $('.dataTableBody').empty();
        for(var i=1;i<=amountOfDayEnds;i++) {
            data += '<tr align="center">';
            data += '<td>' + i + '</td>';
            $.each(types, function (index, value) {
                data += '<td>' + '<input class="text-center amountOfAccounts" type="number" value="0" name="amountOfAccounts-' + value + '"  data-error="Please, insert a value"  required></td>'
            });
            data += '</tr>';
        }
        $('.dataTableBody').append(data);

        $('#dataTable').dataTable();
    }

Answer 1

通常出现此错误有两个原因：

缺少表格标题。
表格正文中td个元素的数量与表格标题中的th元素数量不同。

您忘记为页眉和页脚行添加tr元素。

$('.dataTableHead').append('<tr><th class="text-center">Day</th>');
$('.dataTableFooter').append('<tr><th class="text-center">Day</th>');
var columnNames = '';
$.each(types, function (index, value) {
   columnNames += '<th class="text-center">Type ' + value + '</th>';
});
$('.dataTableHead').append(columnNames + '</tr>');
$('.dataTableFooter').append(columnNames + '</tr>');

有关详细信息，请参阅jQuery DataTables: Common JavaScript console errors - TypeError: Cannot read property ‘mData’ of undefined。

未捕获的TypeError：无法读取属性＆＃39; mData＆＃39;未定义的＃2

1 个答案: