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

user_9955424 0
Viewed 628

I am using Datatable pipeline for generating table. My table has dynamic column means it has no fixed column. The column column number changes with the change of a month. Suppose, during current month the table has 4 column but for november it has 32 columns. When I changes month to november,it gives me Cannot read property 'style' of undefined this error.

My datatable initilization function:

   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;
        }

I genrating column using server side data. Columndefinition function:

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;
    }

I am unable to find any solution

pipeline datatable django jquery javascript
1 Answers

As you can see on DataTable documentation for destroy() method, in the case of column change, you should destroy datatable instance and remove all child nodes of the table element with jQuery#empty() call before adding new columns.

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
        } );
    } );
} );

Here it is the working example.

user_8844910
Related