jQuery Datatables 大数据集未捕获类型错误：无法读取未定义的属性“mData”

因此，我在使用 php 从数据库迭代的一大组行上收到控制台错误。我正在用 metronic 主题初始化它。正如你所看到的，我有我的头部和身体。

我怀疑这个问题可能与输出的大小有关，可能需要使用另一种方法，任何指导表示赞赏

<table id="sample_1" class="table table-striped table-bordered table-hover">
    <thead>
          <tr>
            <th class="table-checkbox">
              <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes"/>
            </th>
            <th>Name</th>
            <th>Source</th>
            <th>Email</th>
            <th>Customer</th>
            <th>Created</th>
            <th>Login</th>
            <th>Active</th>
            <th>Role</th>
            <th>Incentive</th>
            <th>View</th>
            <th>Switch</th>
            <th>Email</th>
          </tr>        
        </thead>
      <tbody>

      <?php
        $users=user::get_all($filter);
        if($users){
          foreach($users as $row){
            $customer=user::get_cutomer_name_by_source_id($row['source_id']);
            ?>
            <tr class='odd gradeX'>
              <td><input type='checkbox' class='checkboxes' value='1'/></td>
              <td><?php echo $row['first_name']." ".$row['last_name']; ?></td>
              <td><?php echo $row['source_id']; ?></td>
              <td><?php echo $row['email']; ?></td>
              <td><?php echo $customer; ?></td>
              <td><?php echo date("m/d/Y", strtotime($row["created"])); ?></td>
              <td><?php if($row['login']!=NULL){echo date("m/d/Y",$row['login']);} ?></td>
              <td><?php if($row['active']==1){echo "Yes";}else{echo "No";} ?></td>
              <td><?php echo user::get_role_name($row['rid']); ?></td>
              <td><?php 
                if($row['cash_incentive']==1){echo "Cash";}else{echo "Regular";} ?>
                </td>
              <td><a href='user-edit?uid="<?php echo $row['uid']; ?>"'>View </a></td>
              <td><a href='switch?email="<?php echo $row['email']; ?>"'> Switch</a></td>
              <td><input type='checkbox' name='email-list[]' value='<?php echo $row['email']; ?>'></td>
            </tr>   
          <?php }
        }
      ?>

</tbody>

这是数据表的 metronic 初始化：

table.dataTable({

        // Internationalisation. For more info refer to http://datatables.net/manual/i18n
        "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing1 _START_ to _END_ of _TOTAL_ entries1",
            "infoEmpty": "No entries found",
            "infoFiltered": "(filtered1 from _MAX_ total entries)",
            "lengthMenu": "Show _MENU_ entries",
            "search": "Search:",
            "zeroRecords": "No matching records found"
        },

        // Or you can use remote translation file
        //"language": {
        //   url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
        //},

        // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
        // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). 
        // So when dropdowns used the scrollable div should be removed. 
        //"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

        "bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.

        "columns": [{
            "orderable": false
        }, {
            "orderable": true
        }, {
            "orderable": false
        }, {
            "orderable": false
        }, {
            "orderable": true
        }, {
            "orderable": true
        }, {
            "orderable": true
        }, {
            "orderable": true
        }, {
            "orderable": true
        }, {
            "orderable": true
        }, {
            "orderable": true
        }, {
            "orderable": false
        }],
        "lengthMenu": [
            [5, 15, 20, -1],
            [5, 15, 20, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 5,            
        "pagingType": "bootstrap_full_number",
        "language": {
            "search": "My search: ",
            "lengthMenu": "  _MENU_ records",
            "paginate": {
                "previous":"Prev",
                "next": "Next",
                "last": "Last",
                "first": "First"
            }
        },
        "columnDefs": [{  // set default column settings
            'orderable': false,
            'targets': [0]
        }, {
            "searchable": false,
            "targets": [0]
        }],
        "order": [
            [1, "asc"]
        ] // set first column as a default sort by asc
    });

CAUSE

由指定的数组中的项目数columns选项应该匹配的数量<td>元素。你有 12 个元素columns数组和 13<td>元素。

来自manual:

请注意，如果您使用columns要定义列，您必须在数组中为表中的每一列都有一个条目（这些可以是null如果您不指定任何选项）。

SOLUTION

添加额外的对象columns数组以匹配 HTML 中的列数。

或者你可以替换columns with columnDefs完全是为了可读性。

"columnDefs": [{
      "orderable": false,
      "searchable": false,
      "targets": [0]
   }, {
      "orderable": false,
      "targets": [2, 3, 11, 12]
   }
],

LINKS

See jQuery DataTables：常见 JavaScript 控制台错误有关此错误和其他常见控制台错误的更多信息。