Re-referencing a previous datatable
Re-referencing a previous datatable
Firstly... best datatable plugin hands-down. Very stable and resilient. Thank you.
Apologies if this is just a dumb jQuery question, but I would like to reference a datatable object long after it has been created - and without creating a global variable to it. Ideally, I would reference it with the ID or class of the original HTML it was instantiated from.
e.g.
[code]
$(document).ready(function() {
$('#datatable').dataTable();
});
[/code]
and then, later, in some unconnected code (say, in an event):
[code]
$('#datatable').dataTable().fnAddData(data);
[/code]
(I am sure I recall I have used an idiom like this with other plugins).
Anyway... what happens is that the table gets wrapped in headers and footers again, of course.
So basically I am asking: given that I know I can find the original HTML table in the DOM, how can I get a reference to the dataTable again so I can call some of its methods?
(I'd rather not put it in a global variable, since what I am trying to do is run many datatables on a page, and selectively re-reference them by ID or class).
Again, apologies if it's a dumb question (...although then at least the answer will be quick :-) )
James
Apologies if this is just a dumb jQuery question, but I would like to reference a datatable object long after it has been created - and without creating a global variable to it. Ideally, I would reference it with the ID or class of the original HTML it was instantiated from.
e.g.
[code]
$(document).ready(function() {
$('#datatable').dataTable();
});
[/code]
and then, later, in some unconnected code (say, in an event):
[code]
$('#datatable').dataTable().fnAddData(data);
[/code]
(I am sure I recall I have used an idiom like this with other plugins).
Anyway... what happens is that the table gets wrapped in headers and footers again, of course.
So basically I am asking: given that I know I can find the original HTML table in the DOM, how can I get a reference to the dataTable again so I can call some of its methods?
(I'd rather not put it in a global variable, since what I am trying to do is run many datatables on a page, and selectively re-reference them by ID or class).
Again, apologies if it's a dumb question (...although then at least the answer will be quick :-) )
James
This discussion has been closed.
Replies
[code]
$(document).ready(function() {
$('#datatable').each(function() {
this.dTable = $(this).dataTable();
});
});
[/code]
...and I can get back to what I wanted from the DOM, later, using:
[code]
$('#datatable').each(function() {
this.dTable.fnAddData(data);
});
[/code]
Perhaps not a purist's use of the DOM, but hey...
The old global variable! Good stuff - trying to keep the global name space clean - I like it! My demos don't do this simply for ease of understand and use, but certainly when it gets to the point where you are considering deployment in a complex program, this can become important. The long and short of what you are looking for is - yes it is possible, although it's not exactly the same as using a global variable.
What happens is that DataTables stores the settings information for each instance in the array $.fn.dataTableSettings (which is globally available with the $ object). The settings information in there is the key to how DataTables works with each table, and each function will accept a settings object as its first parameter (expect in rare cases...).
So what you can do is use the settings object and reference the internal functions (and the external ones I think with a few tricks) as long as you know the index in dataTablesSettings (which will of course be 0 if you only have one table).
There are one or two hoops to jump through with this method, and I quite like the method you suggest. Perhaps this would tidy it up even more:
[code]
$(document).ready(function() {
$.fn.dataTableInstance = [];
$.fn.dataTableInstances.push( $('#datatable').dataTable() );
});
[/code]
Then you have the genuine object that DataTables has created. I quite like that actually - might consider putting it into the main distribution...
Regards,
Allan
Both suggestions (global variable and the cleaner $.fn.dataTableInstances) are great solutions. However, they only work AFTER the table has been initialized since the call to $('#datatable').dataTable() needs to complete first. If you need the reference while the table is being initialized that you seem to be out of luck.
In my case I need a reference to the table from within a function that is pushed onto the filtering array. The problem is, the function is being called WHILE the table is being initialized so the table reference has not been returned yet.
[code]
$.fn.dataTableInstances = [];
$.fn.dataTableExt.afnFiltering.push(
function (settings, data, index) {
console.log($.fn.dataTableInstances.length); // 0 during first table rendering
if ($.fn.dataTableInstances.length > 0) {
var row = $.fn.dataTableInstances[0].fnGetNodes(index);
// do stuff here to determine row filter
}
return true;
}
);
$.fn.dataTableInstances.push( $('table').dataTable(); );
[/code]
Specifically, in my case, I have checkboxes in some table cells and I need to determine if they are checked and/or enabled in order to determine if the row should be displayed. As far as I can tell, the only way to get the current state of the checkbox is to call fnGetNodes(). (I cannot use the values in the data variable since that only has the string representation of how the cell was *originally* rendered.)
In essence, is there another way to get a reference to the dataTable while the plugin is still being initialized?
Thanks.
Jason