Getting a handle to oTable screws up the table

pwc1011

Forgive my official/technical term "screws up the table" :-0

When I try to get a handle to $("#example").dataTable(), it seems as though the table is re-registered. For example, formatting changes and I have big gaps in the table.

Here's an example of some code. As you can see, I'm not doing anything but finding the table and setting it to a variable within a function. $(this) in this instance happens to be an image.

[code]

$table.find("._rowDetail").live("click", function () {
$(this).addTableDetailRow();
});

$.fn.addTableDetailRow = function (options) {
var $t = $(this);
var nTr = $t.parents("tr");
var table = $t.parents("table").dataTable();
var pos = table.fnGetPosition(nTr);
var aData = table.fnGetData(pos);
var id = aData[3];

}
[/code]

Has anyone heard of this happening before? Is there a good way to get a handle after the fact?

Thanks!

pwc1011

It looks like adding it to jQuery is the best options if I want to use it within my functions that are not defined on the page. Assuming a single table:

[code]

var regTable = $("#example").dataTable();

oTable = jQuery.extend( {}, regTable );

$(oTable).fnOpen()...
[/code]

unless someone has a better idea???

Thanks!

pwc1011

The reason for all this is to be able to have standardized functions that handle the registration, processing and removal of many different tables throughout the site.

While I would still love some suggestions... after quite a bit of testing, I'm thinking the better way is to use jQuery.data().

A simple example...

[code]
// standardized create and registration
regTable = function( options ) {
var $t = $(this);
var tId = $t.attr("id");

// set options and extend stuff here...

// create table
var oTable = $("#example").dataTable(options);

// save pointer to table
$(document).data("table." + tId, oTable);

}

// called on button click
rowDetail = function( options ) {
var $t = $(this);
var tId = $t.parents("table").attr("id");

// get the pointer to dataTable so we can use functions and get rows
var oTable = $(document).data("table." + tId);

// add the table detail row....
....

}

// cleanup... maybe not necessary, but always a good idea
unregTable = function(options) {
var $t = $this;
var tId = $t.attr("id");
$(document).removeData( "table." + tId );

}

[/code]

Maybe I'm really missing it, but this seems to work well.

Thanks,
Patrick

allan

Hi Patrick,

Nice follow up on this - thanks for posting your results. I think your way is going to be as good as any for keeping track of multiple instances of DataTables objects. Another method might be to use a global array of pointers to the object (which is basically the same thing without using jQuery data). Either way will work great :-)

Regards,
Allan

u2fan

I wonder if someone would consider creating a plugin to do this kind of registration and management of multiple tables? Sounds like something which could come up quite often in applications.