我对数据表有一个问题。我也浏览了这个链接,但没有任何结果。我已经包括了将数据直接解析到DOM中的所有先决条件。

脚本

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});

当前回答

除了不一致的数字之外,数据表脚本列部分中缺少的项目也会导致这种情况。修正这修正了我的数据表搜索栏。

我说的是这部分;

"columns": [
  null,
  .
  .
  .
  null
           ],

我在这个错误中苦苦挣扎,直到有人指出,这个部分的“null”比我的总人头数少一个。

其他回答

In my case, and using ASP.NET GridView, UpdatePanel and with DropDownList (with Chosen plugin where I reset value to zero using a Javascript line), I got this error and tried everything with no hope for days. The problem was that the code of my dropdown in code behind was as follows and when I select a value twice to apply its action to selected grid rows I get that error. I thought for days it's a Javascript issue (again, in my case) and finally the fix was giving zero for the drowpdown value with the update process:

  private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
  {
     if (ddlTasks.SelectedValue != 0) {
        ChangeStatus(ddlTasks.SelectedValue);
        ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
     }

     dvItemsGrid.DataSource = CreateDatasource();
     dvItemsGrid.DataBind();
     dvItemsGrid.UseAccessibleHeader = true;
     dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  }

这是我的错:

     $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();

技巧1:

参考这个链接,你会得到一些想法:

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

提示2:

检查以下是否正确:

请检查Jquery版本 请检查您的CDN或本地数据表相关的。min和css文件的版本 你的表有<thead></thead> & <tbody></tbody>标签 你的表标题列长度与正文列长度相同 在style='display:none'中使用一些cloudns,同样的属性适用于Header和body。 你的表列没有空,使用一些像[Null,——,NA, Nil] 你的表格没有<td>, <tr>问题

我可能是由acolumns字段产生的。如上所述

aocolcolumns:如果指定了,则该数组的长度必须相等 到原始HTML表中的列数。在此处使用“null” 您希望只使用默认值并自动检测 选项。

然后必须像在Columns表中一样添加字段

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...

有<thead>和<tbody>与<th>和<td>相同的数字解决了我的问题。

对我来说,这个问题与上面给出的答案略有不同。对我来说,HTML标记很好,但是javascript中的一列缺失了,并且与HTML不匹配。

i.e.

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

我的脚本:

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>