How to re-bind DataTable() to a previously created html table after it changes?

ajcolombini

Error messages shown:
DataTables warning: table id=tblMCFixa - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

I can successfully bind DataTable() to a previoully created HTML table.
Another process destroy and re-create this html table, so I need to reflect this change without loose the look-and-feel of the previous DataTable object.

I tryied to use DataTable().clear().redraw(), but the error message above is displayed.

JuJoGuAl

Firts try to put the code example to look the situation, second, you can do some codes to "re build" the datatable:

Add the opcion destroy : true to the dataTable config

jQuery('#table').dataTable({
    destroy: true,
    dom: 'Bfrtip',
    ....
    })

You can Clear the current dataTable, add the rows and re build (with draw option), it will keep the current used options

    table = jQuery('.datatables').DataTable();
            table.clear();
            if(ajax===success){
              jQuery(data.content).each(function(index,value){
                table.row.add([
                  value.row1,
                  value.row2,
                  value.row3,
                  value.row4,
                  value.row5,
                  value.row6,
                  value.row7
                ]);
              });            
            }
            table.draw();

You can destroy and set the dataTable again

        jQuery('#table').dataTable().destroy();
        jQuery('#table').dataTable({});

But to see what exactly you need, we need the example code / test case

ajcolombini

Hi,
Thanks for the quick answer.

I´m trying the third approach... It´s almost working, except when the html table has no rows in tbody and the message for "No records available" (or something like this) is displayed. Then, in the next interaction (after re binding the DataTable), a totaly empty table is displayed. (No header even)

First initialisation:

                   var returnedData = JSON.parse(result);

                    for (var i = 0; i < returnedData.length; i++) {
                        var htmlLinhatabela = gerarHtmlTabelaMCFixa(returnedData[i]);
                        $('#tblMCFixa tbody').append(htmlLinhatabela);
                    }

                    //Aplica DataTable()
                    table = $('#tblMCFixa').DataTable({
                        //"destroy": true,
                        "processing": true,
                        "searching": false,
                        "ordering": false,
                        "scrollX": '100%',

...

later (before new initialisation)...

                     table.destroy();

JuJoGuAl

@ajcolombini Hola! hi!

I recomend to you use the second opcion because you use the clear() and the draw() method of dataTable (so if there is no results to show it only show "No records available" but really is necesary see the problem (more code more capture).

In my experience the second option bring to you a better control os the object