DataTables

mnovakovic

So what about this callback? Did not do much investigation, but i do not see this documented on api page.

Does this option exist?

I am having problems in my application, because when i have table and i apply datatables plugin, i am seeing it "transforming" because it takes some time for datatables to apply itself to html table. So this callback would be a great way to be sure when to display html.

allan

It does indeed exist: http://datatables.net/usage#fnInitComplete

I have actually just discovered a bug with fnInitComplete in 1.4.1 - it is called too early when sAjaxSource is used to populate the table (in that case it is called before the Ajax retrieved data is put into the table). Is this what you are seeing? If you are using data from the DOM, it most certainly should work.

Allan

mnovakovic

Hm... how did i not see it?? I mean, really, how did i not see it...

I am not using sAjaxSource, i am getting all content in html from server and just applying datatables on that.

I will try this tomorrow on work and will give feedback. Thanks a lot :)

mnovakovic

Yup, i was using version 1.3.1. Now everything works ql. Thanks!

rickoshay

I tripped over fnInitComplete after my ajax example failed when applying row modifications in a jQuery "ready" method. IMO, it would be beneficial to put a discussion of fnInitComplete with the ajax example. Also, what is the documentation source for callbacks like fnInitComplete? I see it in "introduction" but was hoping it would all be consolidated under the API or general documentation link.

On another note, the simple, well written and highly organized nature of this plug-in deserves the highest praise. That it fits like a glove in to the jQuery environment is also commendable.

allan

Hi rickoshay,

Have a look at http://datatables.net/usage#fnInitComplete (the usage page is linked from the top of all pages). With the 1.5 release I'm going to tidy up the documentation on this site.

Thank you for your kind words about this software - it's very much appreciated!

Allan

capeck

Any updates on using fnInitComplete with an ajax source? That is something I'd like to make use of but it never seems to get there. Any workarounds? Thanks.

allan

fnInitComplete should work without issue and is something I frequently use. Perhaps you could elaborate (ideally with a link to an example) on in which way it is not working for you.

Allan

cswank

I also am wondering about using fnInitComplete when using sAjaxSource. I have a table that is initialized like:

 oTable = $('#compounds-list').dataTable({
        "bProcessing": true,
	"bServerSide": true,
	"sAjaxSource": compoundsUrl,
	"fnServerData": getCompounds,
	"fnInitComplete":addClicks,
    });

and my addClicks function:

function addClicks() {
    alert(oTable);
    //var nodes = oTable.fnGetNodes();
}

gets called, and the alert says the oTable is undefined. I am able to use the oTable variable for other sorting/filtering tasks. So does that mean the fnInitComplete is getting called too early?

Thanks,

Craig

PS. I've just been using datatables for two days, and it is perfect for my project (or will be perfect once I figure out this).

cswank

I have found that if I use fnDrawCallback instead of fnInitComplete, the oTable variable is initialized, and it also works after sorting on table columns. Now datatables is perfect for my project!

Craig

willowsticks

Has this bug with the Callback being fired before populating the table been fixed?
I am having issues with it as well.

allan

In 1.7 beta the callback functions are now executed with the scope of the DataTables object. As such you can use 'this' rather than oTable. Demo: http://datatables.net/beta/1.7/examples/api/api_in_init.html

Allan

MadLord

I use Datatables 1.7.0 beta 3 and this code

"fnInitComplete": function() {      
    alert(this.fnGetNodes().length);
}

send me "0"...though the table has 2 row....

MadLord

I need to know how many rows in the table....How to learn the real number of rows?...0 or fnInitComplete is getting called too early and does not know how many rows?....

allan

Are you using server-side processing or something? fnSettings().aiDisplay.length will tell you the current display length - but of course if it is being called to early that it's not going to help...

Allan

MadLord

yes, i`m using server-side processing...

oTable = $('#channels').dataTable(           
{                                                       
    "bProcessing": true,                                
    "bServerSide": true,                                
    "sAjaxSource": url,
    "fnServerData": getJson,                            
    "fnRowCallback": fnRow,                         
    "sDom": 'tr',                                       
    "bAutoWidth": false,                                
    "bSortClasses": false,
    "aoColumns":                                  
    [                                             
    /* SELECT */        { "bSortable": false, 
                        "bSearchable": false},
    /* CHAN_NAME */     { "bSortable": false, 
                        "bSearchable": false}
   ]
})

I need to know number of rows(all rows, without filtering... i don`t use filtering in this table) after table initialization...but fnInitComplete is getting called too early and gives out incorrect results...
I have found while such decision:
one page has 2 tables - oTable and oTable2(all tables use server-side processing)...oTable2 has url with '&table=2'...

var oTable_init;
var IntervalID;
function getJson (sSource, aoData, fnCallback)                                  
{                                                                               
   if (this.url.match(/table=2/))
   {
        if (typeof(oTable_init) != 'undefined') {                                                                       
            clearInterval(IntervalID);                                          
        }                                                                       
        else                                                                    
        {                                                                       
            IntervalID = setInterval('oTable2.fnDraw(false)', 1000);         
            return false;                                                       
        }                                                                       
   }
   $.ajax({                                             
    dataType: "json",                                
    type: "POST",                                    
    url: sSource,                                    
    data: aoData,                                    
    success: function (data) {                       
            if (! this.url.match(/table=2/))
                     oTable_init = data.iTotalDisplayRecords;
            fnCallback(data);        
        },                           
        error: function() {          
            alert ("Get JSON error");
        }                            
    });                              
}

I.e. I should know number of rows in the first table before XHR of the second table...

BobR

Allan, you asked (2 years ago, it is true) for some code to demonstrate problems with fnComplete and ajax. Here's one:

I have this code:

            var cTable = $('#matches').dataTable({
		//other properties
                "sAjaxSource": //valid reference to a WCF service
                "sAjaxDataProp": "ResponseData",
                "aoColumns": [
 				//column-related stuff
	                      ],
                "fnInitComplete": function () {
	            var cNodes = cTable.fnGetNodes();
		    //loop through the nodes and do stuff
                }
            });

which worked fine. Then, we had to do some user validation between the time we pulled the data and the time we put up the table, so this wouldn't work anymore. I had to use an ajax call and pass the result to the datatable instead, so:

            var cTable = $('#matches').dataTable({
		//other properties
		"aaData": myJson.ResponseData,
                "aoColumns": [
 				//column-related stuff
	                      ],
                "fnInitComplete": function () {
	            var cNodes = cTable.fnGetNodes();
		    //loop through the nodes and do stuff
                } //function
            }); //datatable

This wouldn't work. I kept getting a "cTable is undefined" error and no data. Once I pulled the fnInitComplete out and ran it afterwards, everything was fine. So, what I'm getting is that you can reference the pointer to the datatable once the initialization is complete, if you are using a direct call to a data source, but if you are passing the result of an ajax call to the datatable you have to wait until the entire datatable sequence executes.

This might be why capeck was having problems.

allan

The problem is if you aren't doing an async Ajax call then cTable wouldn't be defined because it is still initialising! For example this code:

    var cTable = $('#matches').dataTable({
        "fnInitComplete": function () {
        var cNodes = cTable.fnGetNodes();
        }
    });

would fail.

To "fix" this (its not a bug, because it is simply how Javascript works) then you can use the 'this' keyword in the callback function. In all DataTables callbacks 'this' is the DataTables instance - so:

    var cTable = $('#matches').dataTable({
        "fnInitComplete": function () {
        var cNodes = this.fnGetNodes();
        }
    });

would work.

Allan

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion