Reinitialize table when OnChange event is trigged by Header dropdown.

waseemly

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',
           
        });
    });

colin

Hi @waseemly ,

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

Cheers,

Colin