jQuery Datatables large data set Uncaught TypeError: Cannot read property 'mData' of undefined

Question

因此，我在使用 php 从数据库中迭代的大量行上收到控制台错误。我正在用节拍主题初始化它。正如你所看到的，我有我的 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 初始化：

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

原因

columns option should match number of <td> elements. You have 12 elements in columns 数组和 13 个 <td> 元素指定的数组中的项目数。

来自manual：

Note that if you use columns to define your columns, you must have an entry in the array for every single column that you have in your table (these can be null if you don't which to specify any options).

解决方案

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

或者，为了便于阅读，您可以将 columns 完全替换为 columnDefs。

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

链接

有关此错误和其他常见控制台错误的更多信息，请参阅 jQuery DataTables: Common JavaScript console errors。

jQuery Datatables large data set Uncaught TypeError: Cannot read property 'mData' of undefined

jQuery Datatables large data set Uncaught TypeError: Cannot read property 'mData' of undefined

jquery

datatables

metronic

原因

解决方案

链接