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

irfan95

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

colin

You normally see that error when the column count in the HTML, or Ajax, or initialisation, aren't matching, so that would be the place to start. If still no joy, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

irfan95

I matched the column count. It is absolutely fine

irfan95

http://live.datatables.net/kujimowo/1/edit

I have tried in this. Please see the demo

kthorngren

Since your number of columns is changing you will need to first use destroy() followed by jQuery empty() to clear the header. Also use $.fn.dataTable.isDataTable() to make sure the table is a Datatable before the destroy(). See the updated example:
http://live.datatables.net/kujimowo/5/edit

Kevin