Multiple tables with different settings

prestissimo

Hallo - I've got multiple tables on one page. Those tables contain different kinds of data an need other settings (like which columns can't be sorted).

In you're examples you're using the table class like so:
[code]
$(document).ready(function() {
$('.dataTable').dataTable();
} );
[/code]
My problem is that I want every table to have specific settings and therefor I can't use the class.
I've tried the following:
[code]
var oTable;
var oTable2;

$(document).ready(function() {
/* Init the first Table */
oTable = $('#users').dataTable({
"bStateSave": true,
"sDom": '<"italic"i>rt<"bottom"flp<"clear">',
"aoColumns": [
/* Firstname */null,
/* Lastname */null,
/* City */null,
/* Status */null,
/* Actions */{"bSortable": false}]
});

/* Init the second Table */
oTable2 = $('#loginHistory').dataTable({
"sDom": '<"italic"i>rt<"bottom"flp<"clear">',
"bStateSave": false,
"bAutoWidth": false,
});

/* Stuff for the footer */
});
[/code]
Everything works on firefox but IE doesn't render the second table and gives javascript errors on the line where I close the constructor off the second table (line 22 in the sample above).
How can I solve this?

Sander

allan

Hi Sander,

What you've done to get multiple tables to work on a page with different settings is exactly the right thing to do. The only problem is on line 21 of your above code - you have a tailing comma, which suggests that you have another element in the object, but you don't. IE objects to this, while Firefox etc allow for it. Personally I'd say IE was right in this case (not often I say that :-) ).

So if you try:

[code]
var oTable;
var oTable2;

$(document).ready(function() {
/* Init the first Table */
oTable = $('#users').dataTable({
"bStateSave": true,
"sDom": '<"italic"i>rt<"bottom"flp<"clear">',
"aoColumns": [
/* Firstname */null,
/* Lastname */null,
/* City */null,
/* Status */null,
/* Actions */{"bSortable": false}]
});

/* Init the second Table */
oTable2 = $('#loginHistory').dataTable({
"sDom": '<"italic"i>rt<"bottom"flp<"clear">',
"bStateSave": false,
"bAutoWidth": false
});

/* Stuff for the footer */
});
[/code]
I would expect it to start working :-)

Hope this helps,
Allan

prestissimo

Allan - Thanks for you're reply.
One thing did change: IE isn't complaining any more about errors, but still doesn't render two perfect datatables.
What I get is that the first table on the page (oTable in my example) renders perfectly, the second table shows all the data with the 10 rows it should display at the bottom. So those 10 rows are css styled and everything, the sorting functionality is working on it, but all the other rows are still displayed.
When I use the next button underneath, the thing that happens is that 20 rows are css styled and "page 2" displays at the bottom with "page 1" right above it (and above that all the order rows).
Any thoughts?

allan

Sound quite odd. Do you have a link you could provide for this, it might make debugging it much easier. If you don't want to make it public you can send it to me direct at www.datatables.net/contact

Regards,
Allan