jQuery Datatables大数据集Uncaught TypeError:无法读取未定义的属性'mData'

Question

所以我在一个大的行集上得到一个控制台错误,我正在用PHP从数据库迭代.我正在用metronic主题初始化它.如你所见,我有我的thead和tbody.

我怀疑问题可能与输出的大小有关,可能需要使用其他方法,任何指导意见

<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 init:

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
    });

Answer 1

原因

由columnsoption 指定的数组中的项数应与<td>元素数匹配.columns数组中有12个元素,有13个<td>元素.

从手册:

请注意,如果columns用于定义列,则必须在数组中为表中的每个列指定一个条目(null如果不指定任何选项,则可以使用这些条目).

解

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

或者,您可以完全替换columns以columnDefs获得可读性.

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

链接

有关此错误和其他常见控制台错误的详细信息,请参阅jQuery DataTables:常见JavaScript控制台错误.