Uncaught TypeError: Cannot read property 'style' of undefined using datatable pipeline

Question

我正在使用数据table 管道生成 table。我的 table 有动态列意味着它没有固定列。列列号随着月份的变化而变化。假设，在本月 table 有 4 列，但在 11 月它有 32 列。当我将月份更改为 11 月时，它给了我 Cannot read property 'style' of undefined 这个错误。

我的数据table初始化函数：

   function monthlyAttendanceStatusDatatableInit(tableIdOrCss, url, columns, sortArr, pageLength, year, month) {
          console.log(columns);
          var param = {
            "responsive": false,
            // "columnDefs": [
            //   {responsivePriority: 1, targets: -1},
            //   {responsivePriority: 2, targets: 0}
            // ],
            "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, 'All']],
            "pageLength": pageLength || 10,
            "iDisplayLength": pageLength || 10,
            //"language": { search: "" },
            "sPaginationType": "simple_numbers", // you can also give here 'simple','simple_numbers','full','full_numbers'
            "oLanguage": {
              "sSearch": "Search:",
              "sProcessing": "Loading..."
            },
            "ajax": $.fn.dataTable.pipeline( {
              url: url,
              data: {
                'month': month,
                'year': year
              },
              pages: 2 // number of pages to cache
            }),
            "processing": true,
            "serverSide": true,
            "searching": true,
            // "bPaginate": true,
            // "fnDrawCallback":function(){
            //   if(typeof callBack == 'function'){
            //     callBack();
            //   }
            // },
            "destroy": true,
            "paging": true,
            "retrieve": false,
            "aoColumns": columns,
            "aaSorting": sortArr, //[[ 0, "asc" ],[ 1, "desc" ]] // Sort by first column descending
            // "scrollX": true,
            // "createdRow": function( row, data, dataIndex ) {
            //   $(row).attr('id', 'employee-'+data.id);
            // }
          };
          // $(tableIdOrCss).remove();
          var table = $(tableIdOrCss).DataTable(param);
    
          return table;
        }

我使用服务器端数据生成列。列定义函数：

function getColumnDefinition(year, month) {
      var columns = [
        {"sTitle": "ID", "mData": "e_id", "bSortable": true},
        {"sTitle": "Employee Name", "mData": "employee_name", "bSortable": true},
      ];
      var totalDay = getDayCount(year, month);
      var monthS = month.slice(0, 3);
      for (var i = 1; i <= totalDay; i++) {
        if (i < 10) {
          var date = '0' + i.toString();
        }else {
          var date = i.toString();
        }
        var dateColumn = {"sTitle": date + "-" + monthS, "mData": date, "bSortable": true};
        columns.push(dateColumn);
      }
      return columns;
    }

我找不到任何解决方案

Answer 1

正如您在 DataTable 文档中看到的 destroy() 方法，在列更改的情况下，您应该销毁数据 table 实例并删除 table 元素的所有子节点在添加新列之前使用 jQuery#empty() 调用。

var table = $('#myTable').DataTable();
 
$('#submit').on( 'click', function () {
    $.getJSON( 'newTable', null, function ( json ) {
        table.destroy();
        $('#myTable').empty(); // empty in case the columns change
 
        table = $('#myTable').DataTable( {
            columns: json.columns,
            data:    json.rows
        } );
    } );
} );

这是工作 example。

Uncaught TypeError: Cannot read property 'style' of undefined using datatable pipeline

Uncaught TypeError: Cannot read property 'style' of undefined using datatable pipeline

javascript

django

datatable

jquery

pipeline