Reinitialize table when OnChange event is trigged by Header dropdown.

Reinitialize table when OnChange event is trigged by Header dropdown.

waseemlywaseemly Posts: 7Questions: 3Answers: 1

I have a datatable with one of the header columns being a dropdown. Upon changing this dropdown i need to Reinitialize the table after grabbing different data.

The whole datatable is quite complex I have tried to simpfy the code below . So on Change I need to reload the table which effectively means copying and pasting the whole datatabe code into the part where it says /// NEED TO Reinitialize TABLE HERE ///

Is there another way of doing this ?


var table = $('#tableId').DataTable({ initComplete: function () { var columns = table.settings().init().columns; var roles; this.api().columns().every( function (index) { var column = this; if (columns[index].name == 'user_role') { var select = $('<select><option value=""></option></select>') .appendTo( $(column.header()).empty() ) .on( 'change', function () { /// NEED TO Reinitialize TABLE HERE /// alert($(this).val()); } ); $.get( "/roles/get" ) .done(function( data ) { var optionString = ''; data.forEach(function(element,optionString) { select.append( '<option value="' + element.id + '">' + element.type + '</option>'); }); }); // column.data().unique().sort().each( function ( d, j ) { // select.append( '<option value="'+d+'">'+d+'</option>' ) //// } ); } } ); }, processing: true, serverSide: true, searching: false, bPaginate: true, bFilter: false, autoWidth: false, ajax: '/url/here', type: 'GET', }); });

Answers

  • colincolin Posts: 9,522Questions: 0Answers: 1,576

    Hi @waseemly ,

    You could just use ajax.reload() to get the new data, rather than reinitialising the table.

    Cheers,

    Colin

This discussion has been closed.