jQuery: come salvare lo stato degli elementi checkbox con il plugin DataTable

In questo articolo vedremo come salvare lo stato degli elementi checkbox col plugin DataTable e jQuery.

Ad ogni cambio di pagina, DataTable effettua un redraw della tabella che provoca la perdita dello stato corrente delle checkbox. Il primo step da implementare è il salvataggio di tale stato in un array.

var checkboxValues = [];

$( ".table-check" ).on( "change", function() {
    var $checkbox = $( this );
    var value = $checkbox.val();

    if(!checkboxValues.includes(value) && $checkbox.prop( "checked" ) ) {
        checkboxValues.push( value );
    } else {
        checkboxValues.splice( checkboxValues.indexOf( value ), 1 );
    }
});

Una volta salvati i valori, possiamo usare l'evento draw di DataTable.

$( "#table" ).on( "draw.dt", function() {
    if( checkboxValues.length > 0 ) {
        checkboxValues.forEach(function( value ) {
            $( "[value=" + value + "]", "#table" ).prop( "checked", true );
        });
    }
});