重新创建数据表时，Jquery 数据表出错：TypeError: t[c] 未定义

Question

我有一个创建数据表的函数。 在页面加载时，数据表被创建和绘制。 现在，当我提交表单以在表格上进行搜索时，我调用了相同的函数。 首先，我创建了数据表的一个实例，我调用了 clear 函数，然后我调用了该函数来重新创建它。

这是我第一次创建数据表的方法，效果很好：

    $(window).load(function () {


        var table = UpdateTableCompany(null, null);
        .....

这是管理数据表的函数：

    function UpdateTableCompany(val, search_field)
{
    $('#tablePubDev').DataTable().clear();
    var table = $('#tablePubDev').DataTable({
        destroy: true,
        searching: false,
        "lengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
        "pageLength": 5,
        "columnDefs": [
            {
                "render": function (data, type, row) {


                    var text = '<div class="form-group">' +
                            '<div class="checkbox-nice center" style="cursor: default; height:100px;">' +
                            '<img  src="/application/assets/img/pub_devs/logos/' + row['c']['logo'] + '" style="max-height:100%; max-width: 100%;"/>' +
                            '</div>' +
                            '<div class="checkbox-nice text-center" style="cursor: default">' +
                            '<strong >Id: ' + pad(data, 11) + '</strong>' +
                            '</label>' +
                            '</div>' +
                            '</div>';


                    return text;
                },
                "targets": 0,
            },
            {
                "render": function (data, type, row) {


                    var text = '<div class="form-group">' +
                            '<div class="checkbox-nice center" style="cursor: default; height:100px;"><p class="center" style="font-size: 150%; font-weight: bold;">' +
                            row['c']['descr'] +
                            '</p></div>' +
                            '</div>';


                    return text;
                },
                "targets": 1,
            },
            {
                "render": function (data, type, row) {

                    var add_text1 = '';
                    var checked1 = '';
                    var add_text2 = '';
                    var checked2 = '';

                    if (data != null && data > 0) {

                        checked1 += 'checked="checked"';
                    } else
                        add_text1 += 'buttonDisabled ';

                    if (row['c']['developer'] != null && row['c']['developer'] > 0) {

                        checked2 += 'checked="checked"';
                    } else
                        add_text2 += 'buttonDisabled ';


                    var text = '<div class="form-group">' +
                            '<div class="checkbox-nice ' + add_text1 + '" style="cursor: default">' +
                            '<input type="checkbox" ' + checked1 + ' disabled="disabled" id="checkbox-1">' +
                            '<label for="checkbox-1">' +
                            'Publisher ' +
                            '</label>' +
                            '</div>' +
                            '<div class="checkbox-nice ' + add_text2 + '" style="cursor: default">' +
                            '<input type="checkbox" id="checkbox-2" ' + checked2 + ' disabled="disabled">' +
                            '<label for="checkbox-2">' +
                            'Developer' +
                            '</label>' +
                            '</div>' +
                            '</div>';


                    return text;
                },
                "targets": 3,
            },
            {
                "render": function (data, type, row) {
                    var text = '<td style="width: 20%;">' +
                            //'<a href="#" class="table-link">' +
                            //'<span class="fa-stack">' +
                            //'<i class="fa fa-square fa-stack-2x"></i>' +
                            //'<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>' +
                            //'</span>' +
                            //'</a>' +
                            '<a href="#" class="table-link updatePubDev" data-modal="modal-11">' +
                            '<span class="fa-stack">' +
                            '<i class="fa fa-square fa-stack-2x"></i>' +
                            '<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>' +
                            '</span>' +
                            '</a>' +
                            '<span class="fa-stack table-link danger deletePubDev">' +
                            '<i class="fa fa-square fa-stack-2x"></i>' +
                            '<i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>' +
                            '</span>' +
                            '</td>';


                    return text;
                },
                "targets": 4,
            }
        ],
        "columns": [
            {"data": "c.idpubdev", "name": "c.idpubdev"},
            {"data": "c.descr", "name": "c.descr"},
            {"data": "c.date_founded", "name": "c.date_founded"},
            {"data": "c.publisher", "name": "c.publisher"},
            {"data": "c.date_founded", "name": "c.date_founded"},
            {"data": "c.developer", "name": "c.developer", "visible": false, "searchable": false},
            {"data": "c.logo", "name": "c.logo", "visible": false, "searchable": false},

        ],
        "order": [[0, false], [1, 'asc'], [2, 'asc'], [3, 'asc']],

        "displayLength": 3,
        serverSide: true,
        "ajax":
                {
                    "url": "/pubdev/search/",
                    "type": "POST",
                    "data": function (d) {
                        if (val)
                            d.val = val;
                        if (search_field)
                            d.search_field = search_field;
                    }

                },
        error: function (request, status, error) {
            alert('Unable to update table contents');
            console.log(request);
            console.log(status);
            console.log(error);
        },

    });

    return table;
}

这是执行搜索功能的表单的提交：

 $("#search_form").submit(function (e) {
            e.preventDefault();

            var search_key = $.trim($('#val').val());
            var search_field = 'c.descr like ';

            table = $('#tablePubDev').DataTable();

            table.clear();

            table = UpdateTableCompany(search_field, search_key);

        });

我目前使用的是jquery版本v1.10.2的缩小格式数据表的版本是1.10.4

这是我在控制台中得到的错误

我尝试了一个实验：我没有在文档就绪时加载数据表，所以我进行了搜索提交以加载数据表，并且成功了！ 当然，如果我进行第二次搜索，则会发生同样的错误，因此问题与重新创建数据表有关。 所有后端代码 (php) 都能正常工作并提供所需的结果。

这是html中的表格

 <div class="main-box no-header clearfix"> <div class="main-box-body clearfix"> <div class="table-responsive"> <table id="tablePubDev" class="table user-list table-hover"> <thead> <tr> <th>Company</th> <th>Name</th> <th><span>Listed Games</th> <th>Type</th> <th>Actions</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div>

我尝试使用未缩小版本的数据表（v 1.10.12），但我仍然遇到错误，但现在它说他的：

类型错误：headerCells[i] 未定义

headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !==...

    // Clone the table header and footer - we can't use the header / footer
        // from the cloned table, since if scrolling is active, the table's
        // real header and footer are contained in different table tags
        tmpTable.find('thead, tfoot').remove();
        tmpTable
            .append( $(oSettings.nTHead).clone() )
            .append( $(oSettings.nTFoot).clone() );

        // Remove any assigned widths from the footer (from scrolling)
        tmpTable.find('tfoot th, tfoot td').css('width', '');

        // Apply custom sizing to the cloned header
        **headerCells = _fnGetUniqueThs( oSettings, tmpTable.find('thead')[0]** ); <-- This is where the error occurs <--

        for ( i=0 ; i<visibleColumns.length ; i++ ) {
            column = columns[ visibleColumns[i] ];

            headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !== '' ?
                _fnStringToCss( column.sWidthOrig ) :
                '';

            // For scrollX we need to force the column width otherwise the
            // browser will collapse it. If this width is smaller than the
            // width the column requires, then it will have no effect
            if ( column.sWidthOrig && scrollX ) {
                $( headerCells[i] ).append( $('<div/>').css( {
                    width: column.sWidthOrig,
                    margin: 0,
                    padding: 0,
                    border: 0,
                    height: 1
                } ) );
            }
        }

        // Find the widest cell for each column and put it 

更新：

我想我知道为什么会发生这种情况，尽管我仍然需要为此找到解决方法。 碰巧的是，当我在 Datatable 实例化中定义我的列时：

   "columns": [
            {"data": "c.idpubdev", "name": "c.idpubdev"},
            {"data": "c.descr", "name": "c.descr"},
            {"data": "c.date_founded", "name": "c.date_founded"},
            {"data": "c.publisher", "name": "c.publisher"},
            {"data": "c.date_founded", "name": "c.date_founded"},
            {"data": "c.developer", "name": "c.developer", "visible": false, "searchable": false},
            {"data": "c.logo", "name": "c.logo", "visible": false, "searchable": false},

这些需要与我包含在我的 html 页面中的表头一样多

 <thead> <tr> <th>Company</th> <th>Name</th> <th><span>Listed Games</th> <th>Type</th> <th>Actions</th> </tr> </thead>

在这种情况下，我有 5 个表头和 7 个数据列定义（其中两个具有可见 = false）。 当我在旧项目中使用它们时，我所要做的就是将“visible”属性设置为 false，这样它们就不会被映射到表头，但在这里它似乎不起作用......为什么要这样做你认为那会发生吗？ 我有办法解决它吗？

Answer 1

好的，我真的解决了这个问题！ 所以在 datatable.js 插件中有一个错误（功能 ?? ）。 当它尝试自动调整列的宽度时，它需要有与定义的数据列一样多的标题。 因此，如果您有 7 个列定义，而您只定义了 5 个标题，则代码将因空指针异常而失败。 解决此问题的一种方法是将 autowidth 参数设置为 false（默认情况下为 true）。

 function UpdateTableCompany(val, search_field) { var table = $('#tablePubDev').DataTable({ 'destroy': true, searching: false, 'info': false, paging: true, retrieve: false, processing: true, "autoWidth": false, // This parameter must be set to false ......

通过这样做，您可以避免调用实际尝试执行自动宽度的函数。 因此，通过避免数据表代码的那部分，您将不会遇到所描述的错误。

Answer 2

不必每次单击#search_form button时都重新创建表，而应仅重新加载表数据源。 请尝试以下操作：

首先，让我们稍微改变一下你的函数，这样它就不会再被用来更新你的表，而是用来创建它（它只会被调用一次）。 删除搜索参数如下：

来自function UpdateTableCompany(val, search_field)

function UpdateTableCompany()

您可能还想重命名您的函数：

function CreateTableCompany() {
...

现在，在“ajax”函数中，更改获取值的方式。 使它以动态方式获取值，例如：

d.val = $('#val').val().trim();
d.search_field = $('#search_field').val().trim();

现在您需要在加载范围之外创建table变量，以便可以从其他函数访问它：

var table;
$(window).load(function () {
    table = CreateTableCompany();
...

最后，移除提交函数的内容（ e.preventDefault();除外）

它应该是这样的：

$("#search_form").submit(function (e) {
    e.preventDefault();
    table.ajax.reload();
});

我认为这会奏效。 我希望它有帮助。

Answer 3

有时，由于 thead 和 datatable 列的列数不同，可能会发生此错误。