How to get the oTable DataTable object from the table's ID?

sham

Hi,

I believe my problem is a pretty simple one, but hours of Googling did not help...

I create a DataTable, which works great (good work guys!), then later, somewhere else in my code I need to access it to make some modifications... How can I retrieve the DataTable object (usually named oTable in the provided examples) from the ID of my table? (ex: )

Many, many thanks for your help, I'm stuck! :-)

Jim

allan

Just do this: $('#myTable').dataTable();

It will either create a table if it's not already created on that element, or if it is, simply return the originally created object.

Allan

sham

Hi Allan,

Thanks a lot for your quick answer.

Unfortunately, I already tried that solution and it pops the following javascript alert :

"DataTables warning : Unable to re-initialise DataTable. Please use the API to make any configuration changes required."

Despite the annoying popup warning, it works, I do get the DataTable object to work with.

Am I supposed to get that warning?
Did I do something wrong?
If not, how to avoid it?

Cheers,
Jim

allan

Are you using DataTables 1.6? This is something that was added in 1.7: http://datatables.net/new/1.7 .

Allan

sham

Hi Allan,

Woohoo, you're right, I was running 1.6! Switching to 1.7 fixed the issue, it now works like a charm!

Thanks a lot for the quick support!

Cheers,
JMT

MikeS

I'm trying to do something similar in that I need to get an oTable reference to each datatable that I have on the page and call fnAdjustColumnSizing on it when the div ("Main") containing those tables is resized. Here's what I've tried without luck:

[code]
$('#Main').bind('resize', function ()
{
$('.datatable').each( function(i)
{
$(this).fnAdjustColumnSizing() ;
}) ;
});
[/code]

I receive a message, "Error: Object doesn't support this property or method" when the line "$(this).fnAdjustColumnSizing();" is executed. I'm hoping this is something simple to solve. Anyone?

allan

I suspect that this might work (although I've not tried it):

[code]
$('#Main').bind('resize', function ()
{
$('.datatable').each( function(i)
{
$(this).dataTable().fnAdjustColumnSizing() ;
}) ;
});
[/code]
Reasoning - the value of 'this' in the each function will be the value of the array generated by jQuery - i.e. the table nodes. These then need to be 'DataTables-ised' and the function run on them, since the DataTables function aren't attached to the jQuery object, but to DataTables itself.

Ultimately DataTables should support chaining, and I plan to do that for DataTables 2 - whenever that happens...

Allan

MikeS

Thanks for the suggestion Allan. I gave it a try but encountered this:

"Line: 138
Error: 'asSorting' is null or not an object"

At least it appears to have got further :)

allan

That sounds like a different issue to me then - if it is at least seeing the fact that asSorting is a known parameter - than that's good. Are you able to post a link?

Allan

yasean

Hi guys, i have a problem i wanted to combine between the "Colvis" and the "TableTools" in the same table but just one of those two is showed ! i got the same first message of Sham : [quote]DataTables warning : Unable to re-initialise DataTable. Please use the API to make any configuration changes required[/quote]
Thanks For your help !

robertbrower

Hello Allan.

I am using the UI Layout plugin and I am assigning a callback to the onresize event of a layout pane so that I can call fnAdjustColumnSizing to resize the data table columns of the data table that the pane contains. In my resizer plugin I am doing something like this (which does not work).

$P.find("table.dataTable:visible").each(function() {
$(this).dataTable().fnAdjustColumnSizing();
});

The data table becomes mucked up, e.g. the header which contains the "Show N entries" and the search box get duplicated, one on top of the other. It appears as though the plugin is creating another instance of itself instead of just returning the original dataTable object.

I have also tried:

$($(this).selector).dataTable({"bRetrieve": true}).fnAdjustColumnSizing();

But with this line I get, "Microsoft JScript runtime error: 'oFeatures' is null or not an object"

How can I get the object which I need to call fnAdjustColumnSizing() on without mucking it up? I am using data tables 1.9.1.

Thank you!

Robert

allan

Hi Robert,

I'd suggest using the fnTables static API method to get the table nodes which have already been initialised and then operate on them: http://datatables.net/api#fnTables . There is an example of it live here: http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html .

I suspect the issue you are facing is that the selector is picking up multiple tables and trying to make them into DataTables themselves (in fairness I thought DataTables had a bit of protection for that, so I'll look into that).

Thanks,
Allan

robertbrower

The example code for fnTables is exactly what I need. But I will have to filter the results to include only the tables in the pane that triggered the resize event. Thank you Allan.

robertbrower

Here's the resize plugin for the UI Layout plugin for DataTables:

/**
* UI Layout Callback: resizePaneDataTables
*
* This callback is used when a layout-pane contains 1 or more DataTable objects.
* - whether the DataTable is a child of the pane or is nested within other elements
* Assign this callback to the pane.onresize event:
*
* SAMPLE:
* $("#elem").tabs({ show: $.layout.callbacks.resizePaneDataTables });
* $("body").layout({ center__onresize: $.layout.callbacks.resizePaneDataTables });
*
* Version: 1.0 - 2012-07-06
* Author: Robert Brower (atomofthought@yahoo.com)
*/
; (function ($) {
var _ = $.layout;

// make sure the callbacks branch exists
if (!_.callbacks) _.callbacks = {};

_.callbacks.resizePaneDataTables = function (x, ui) {
// may be called EITHER from layout-pane.onresize OR tabs.show
var $P = ui.jquery ? ui : $(ui.panel);
// find all VISIBLE data tables inside this pane and resize them
$($.fn.dataTable.fnTables(true)).each(function(i, table) {
var $table = $(table);
if ($.contains($table.get(), $P)) {
$table.dataTable().fnAdjustColumnSizing();
}
});
};
})(jQuery);

allan

Nice one :-). Thanks very much for sharing your solution with us!

Regards,
Allan