call the same function for initComplete and reload ?

trucmuche2005

Hello,

I intitialize a datatable with

var tableDONNEES = $("#matable").DataTable( {
        "ajax": {
            url: "script.php",
            type: "GET",
            data: { 'operation' : "info" }
          }, 
"initComplete": initCompleteFunction,
...

where the initCompleteFunction has been defined by

function initCompleteFunction(settings, json){
    var api = this.api();
    api.columns().eq( 0 ).each( function ( colIdx ) {
...

Now, I would like to call the initCompleteFunction when the datatable is reloaded using 'reload' function. The line

tableDONNEES.ajax.reload(null, false);

works (but obviously does not call initCompleteFunction) and I tried

tableDONNEES.ajax.reload(initCompleteFunction, false);

which gives me the following error : "TypeError: this.api is not a function. (In 'this.api()', 'this.api' is undefined)" at line "var api = this.api();".

What's the problem ? Could you help me please ?

Many thanks in advance,

T.

gyrocode

It seems that you want to call the same function once ajax request is completed.

The reason it fails because when you reload the table initCompleteFunction is called with a different this context and with different parameters.

I would use xhr event instead of initComplete option.

function initCompleteFunction(settings, json){
   var api = new $.fn.dataTable.Api( settings );
   // ... skipped ...
}

$(document).ready(function(){
    $('#matable').on('xhr.dt', function ( e, settings, json, xhr ) {
        initCompleteFunction(settings, json);
    } );

    var tableDONNEES = $("#matable").DataTable( {
        // ... skipped ...
    });
});

Then use tableDONNEES.ajax.reload(null, false); to reload the table which will trigger xhr event upon completion.

---

See more articles about jQuery DataTables on gyrocode.com.

trucmuche2005

Thank you very much for your help. I learn :-)

But I have now to modify some code in the initCompleteFunction and I don't know exactly how... The line

$( '.select2', api.rows().nodes() ).select2();

was working with 'var api = this.api();' but not anymore (it works when reload() but not when the table is initialized with the page loading). What should I change to make it work when table is loaded AND reloaded ?

Moreover, I had this before :

api.columns().eq( 0 ).each( function ( colIdx ) {
     $( 'input', api.column( colIdx ).header() ).on( 'keyup change', function (ev) {
var filter = jQuery.fn.DataTable.ext.type.search.html(...);
api.column( colIdx ).search( filter ,true, false ).draw();
} );

It works when the table has been initialized with the page loading but after reloading, I get the the following error : "TypeError: null is not an object (evaluating 'api.columns().eq( 0 ).each')" (but the filtering still works).

Could you please help me ?

trucmuche2005

Oh I found that I have to replace api.columns().every( function ( colIdx ) by api.columns().every( function ( colIdx ). I'm still looking for the replacement of $( '.select2', api.rows().nodes() ).select2(); to make it work on table load...

trucmuche2005

Well, since the question is different from the first one in this topic, I created a new one here.