jQuery Datatables 大数据集 Uncaught TypeError:无法读取未定义的属性“mData" [英] jQuery Datatables large data set Uncaught TypeError: Cannot read property 'mData' of undefined

问题描述

因此，我在使用 php 从数据库中迭代的大量行上出现控制台错误.我正在用 metronic 主题初始化它.正如你所看到的，我有我的头和体.

So I get a console error on a large set of rows that I'm iterating from a database with php. I am initializing this with the metronic theme. As you can see I have my thead and tbody.

我怀疑这个问题可能与输出的大小有关，并且可能需要使用另一种方法，感谢任何指导

I suspect the issue could pertain to the size of the output and maybe needing to use another method, any guidance appreciated

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

And here is the metronic init for the datatable:

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 选项指定的数组中的项目数应该匹配 元素的数量.columns 数组中有 12 个元素和 13 个 <td> 元素.

CAUSE

Number of items in array specified by columns option should match number of <td> elements. You have 12 elements in columns array and 13 <td> elements.

来自手册:

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

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 中的列数.

SOLUTION

Add extra object to columns array to match number of columns in the HTML.

或者，您可以将 columns 完全替换为 columnDefs 以提高可读性.

Alternatively you can replace columns with columnDefs entirely for readability.

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

链接

参见 jQuery 数据表:常见的 JavaScript 控制台错误，了解有关此错误和其他常见控制台错误的更多信息.

LINKS

See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.

这篇关于jQuery Datatables 大数据集 Uncaught TypeError:无法读取未定义的属性“mData"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！