Conditionally select checkbox for entire dataset

mrosent

Code Pen is here: https://codepen.io/mrosent/pen/GMzoVp

This code works to conditionally select incomplete rows, but only works for the displayed page:

$('#selectIncompletePage').click(function(e) {
    e.preventDefault();
    $('.btn-warning', table).each(function() {
        $('td input[type="checkbox"]', $(this).parents('tr').first()).attr('checked', true);
    });
});

I use this technique to change the underlying data, but the results are not rendered in the datatable:

$('#selectIncompleteAll').click(function (e) {
  e.preventDefault();
    var table = $('table').DataTable();

  table.rows().every(function () {
     var d = this.data();
     if (d[3].indexOf('btn-warning') > -1) {
         d[4] = '<input type="checkbox" checked="true">';
         }

     this.invalidate(); // invalidate the data DataTables has cached for this row
    });

  // Draw once all updates are done
  table.draw();
});

I have used a similar technique in earlier versions of Datatable, but cannot understand why the changes aren't being rendered here.

mrosent

[SOLVED}
Changing this:

     if (d[3].indexOf('btn-warning') > -1) {
         d[4] = '<input type="checkbox" checked="true">';
     }

To this:

     if (d[3].indexOf('btn-warning') > -1) {
        d[4] = '<input type="checkbox" checked="true">';
        this.data(d);
     }

Resolved it.

allan

Your original code looks like it might work, but you might have to use this.invalidate('data'). By default DataTables will attempt to get new data from the same place it got the original data - I suspect here that is the DOM. You are writing into the Javascript variable, so you need to tell it to get the new data from there.

Allan