未捕获的类型错误：无法使用数据表管道读取未定义的属性“样式”

Question

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

我的数据表初始化函数：

   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;

        }

Answer 1

正如您在 DataTable 文档中关于destroy()方法所看到的，在列更改的情况下，您应该在添加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        } );    } );} );这是工作示例。