jQuery Datatables大数据集未捕获的TypeError:无法读取未定义的属性“mData”

时间:2022-08-24 14:56:39

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.

因此,我在使用php迭代数据库的一大堆行中得到了一个控制台错误。我正在用节拍器主题初始化它。正如你看到的,我有我的thead和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>

And here is the metronic init for the datatable:

这是datatable的节拍器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
    });

1 个解决方案

#1


7  

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.

列选项指定的数组中项的数量应该与元素的数量匹配。在列数组中有12个元素,13个元素。

From the 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).

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

SOLUTION

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

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

Alternatively you can replace columns with columnDefs entirely for readability.

或者,您可以完全用columnDefs替换列,以提高可读性。

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

LINKS

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

参见jQuery DataTables:关于此和其他常见控制台错误的更多信息,请参见常见的JavaScript控制台错误。

#1


7  

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.

列选项指定的数组中项的数量应该与元素的数量匹配。在列数组中有12个元素,13个元素。

From the 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).

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

SOLUTION

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

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

Alternatively you can replace columns with columnDefs entirely for readability.

或者,您可以完全用columnDefs替换列,以提高可读性。

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

LINKS

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

参见jQuery DataTables:关于此和其他常见控制台错误的更多信息,请参见常见的JavaScript控制台错误。