Rows invalidate 'dom' error

krychaj5 · November 2018

I'm trying to invalidate my datatable rows, but for some reason it is giving me following error:

Uncaught TypeError: Cannot read property 'length' of null
at Ha (jquery.dataTables.min.js:23)
at ca (jquery.dataTables.min.js:22)
at s.<anonymous> (jquery.dataTables.min.js:113)
at s.iterator (jquery.dataTables.min.js:100)
at s.<anonymous> (jquery.dataTables.min.js:113)
at s.invalidate (jquery.dataTables.min.js:102)
at HTMLInputElement.<anonymous> ((index):1108)
at HTMLTableElement.dispatch (jquery-1.12.4.js:5226)
at HTMLTableElement.elemData.handle (jquery-1.12.4.js:4878)

There is row invalidation trigger function:

$('#oDataTable').on('change', ':checkbox.trik', function(e) {
var row = $(this).closest('tr');
var tery1 = row.find('input:checkbox:checked').length;
var kluj = parseInt(tery1);
var cell = $(this).closest('td.counter');
row.find('td.counter').text(kluj);
t.rows().invalidate('dom')
});

First 5 lines of it are calculating checkboxes checked in desired row and then putting counter of them into row cell - it's working good.

But problem is with DOM invalidation - I'm calling it because after adding my counter to table, Its unable to sort datatable column by these dynamic added counter values.

When I'm just using 'invalidate()' there is no error but sorting wont work.

There is also my datatable setup:

var t = $('#oDataTable').DataTable({
"lengthMenu": [
[25, 50, 100, 150, 200, -1],
[25, 50, 100, 150, 200, "All"]
],
dom: 'Blfrtip',
buttons: [{

      extend: 'colvis',
      collectionLayout: 'fixed four-column',
      text: 'Select columns',
      columnText: function ( dt, idx, title ) {
        return idx+": <b>"+title+"</b>";
      }

  },
  {
      extend: 'excelHtml5',
      exportOptions: {
          columns: [ 12,13,17,45 ]
      }
  }
],

  select: {
      style:    'multi+shift'
  },


  "paging": true,
  "colReorder": true,
  "fixedHeader": true,
  "pageLength": 25,
  'ajax': {
    'type': 'POST',
    'url': '/populatedt     
  },
  "deferRender": true,
  'columns': [
    {
            "className":      'details-control doop',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
    },

// THERE ARE OTHER COLUMNS AND THEM DATA REFERENCE TO MY AJAX

  ],

  "columnDefs": [
    {
      targets: [1,2,3,4,5,6,7,8,9,10,11],
      orderDataType: 'dom-checkbox'
    },

],

});

kthorngren · November 2018

Its hard to say what the problem would be without seeing it. Can you post a link to your page or a test case replicating the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You could try using Datatable's APIs to update the table. Something like this maybe:

$('#oDataTable').on('change', ':checkbox.trik', function(e) {
var row = $(this).closest('tr');
var tery1 = row.find('input:checkbox:checked').length;
var kluj = parseInt(tery1);

var data = t.row( this ).data();
data.counter = kluj;
t.row( this ).data( data ).draw();

});

Kevin

krychaj5 · November 2018

Hi Kevin!
I have added additional value in my ajax for every row:

counter: 0

to test your answer

Now my column for counter is defined like that:

       {
          'data': 'counter',
          "className": "counter",
          'name': 'counter'
        },

I have fixed Your code at line #6 because t.row( this ).data(); was not reffering to row data.

Now it is (i can see JSON data of row after console log):

$('#oDataTable').on('change', ':checkbox.ptaszek', function(e) {
       var row = $(this).closest('tr');
       var crow = t.row( row );
       var tery1 = row.find('input:checkbox:checked').length;
       var kluj = parseInt(tery1);
       var data = crow.data();
       console.log(data)
       data.counter = kluj;
       crow.data( data ).draw();
   });

But problem is with applying this data into my table - checking checkbox incrementing the counter value in JSON but NOTHING happens in my table - checkbox visuable isn't checking and counter cell wont increment.

kthorngren · November 2018

You are right, line 6 should be this:
var data = t.row( row ).data();

As far as the issues you are having we would need a link to your page or a test case to help debug. Without seeing it and an example of your data it would be hard to help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

krychaj5 · November 2018

Kevin, could you tell me how can I pass my ajax to example sites like jsfiddle?
I wont provide url to my server

kthorngren · November 2018

My suggestion is to take a subset of your JSON data and place it into a Javascript variable. Then replace your ajax config with data and assign the variable to it. Your data should then load similar to the ajax data.

Kevin

Rows invalidate 'dom' error

Rows invalidate 'dom' error

Answers

Howdy, Stranger!

Categories

DataTables

Rows invalidate 'dom' error

Rows invalidate 'dom' error

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables