Jquery Datatable在重新创建datatable时出现错误：TypeError: t[c]未定义。

Question

Jquery Datatable在重新创建datatable时出现错误：TypeError: t[c]未定义。

6

我有一个创建数据表的函数。在页面加载时，数据表被创建并绘制。现在，当我有一个表单提交来搜索表格时，我调用相同的函数。首先我创建一个数据表的实例，然后调用清除函数，最后再调用重新创建函数。

以下是我第一次创建数据表的方式，它可以正常工作：

    $(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，datatable的版本是1.10.4。

这是我在控制台中看到的错误信息：

我尝试了一个实验：我没有在文档准备好时加载datatable，而是通过搜索提交来加载datatable，它起作用了！当然，如果我进行第二次搜索，则会出现相同的错误，因此问题与datatable的重建有关。所有后端代码（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>

我尝试使用未压缩的Datatable版本（v1.10.12），但仍然遇到了错误。现在它显示如下内容：

TypeError: headerCells[i] is undefined
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个数据列定义（其中两个visible = false）。在早期的项目中使用它们时，我只需将“visible”属性设置为false，这样它们就不会被映射到表头，但在这里似乎不起作用...你认为这可能是为什么？有没有解决方法？

- Salvo

我认为在后端我使用了PHP，但我觉得问题与PHP无关，而是与JQuery或Datatable插件有关。 - Salvo

有人能帮忙吗？我已经把我认为有用的东西都放了上去。 - Salvo

3个回答

0

有时候，由于thead和datatable列数不同，会出现这个错误。

- Asheeka K P

0

不要每次单击#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();

现在你需要在load作用域之外创建你的table变量，这样它就可以从其他函数中访问：

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

最后，删除submit函数的内容（除了e.preventDefault();）。

它应该像这样：

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

我认为这会起作用。希望能有所帮助。

- Luis Fernando Babinski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Salvo · Accepted Answer

好的，我实际上解决了这个问题！datatable.js插件中存在一个（bug？）问题。当它尝试自动调整列宽时，它需要与定义的数据列数量一样多的表头。因此，如果您有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
          ......

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