DataTables logo DataTables

How to get the oTable DataTable object from the table's ID?
  • 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: <table id="myTable">)

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

    Jim
  • 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
  • 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
  • Are you using DataTables 1.6? This is something that was added in 1.7: http://datatables.net/new/1.7 .

    Allan
  • 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
  • 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:

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

    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?
  • I suspect that this might work (although I've not tried it):

    $('#Main').bind('resize', function () 
    {
    	$('.datatable').each( function(i)
    	{
    		$(this).dataTable().fnAdjustColumnSizing() ; 
    	}) ;
    });
    
    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
  • 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 :)
  • 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
  • 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 :
    DataTables warning : Unable to re-initialise DataTable. Please use the API to make any configuration changes required
    Thanks For your help !
  • 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
  • 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
  • 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.
  • 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 ([email protected])
    */
    ; (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);
  • Nice one :-). Thanks very much for sharing your solution with us!

    Regards,
    Allan
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.