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

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

shamsham Posts: 3Questions: 0Answers: 0
edited September 2010 in General
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

Replies

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
    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
  • shamsham Posts: 3Questions: 0Answers: 0
    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
  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
    Are you using DataTables 1.6? This is something that was added in 1.7: http://datatables.net/new/1.7 .

    Allan
  • shamsham Posts: 3Questions: 0Answers: 0
    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
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    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?
  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
    edited September 2010
    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
  • MikeSMikeS Posts: 113Questions: 1Answers: 0
    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 :)
  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
    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
  • yaseanyasean Posts: 1Questions: 0Answers: 0
    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 !
  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    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
  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
    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
  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    edited June 2012
    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.
  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    edited June 2012
    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);
  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
    edited June 2012
    Nice one :-). Thanks very much for sharing your solution with us!

    Regards,
    Allan
This discussion has been closed.