Managing Multiple Non-Standard Tables

bryceray1121

I have a page with 14 tables. The tables all have varying numbers of columns. Originally, I had it setup to initiate all tables using one call such as:
[code]
var oTable = jQuery(class).dataTable( {
"sScrollY": "200px",
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bStateSave": false
} );
[/code]

However, I ran into a problem because I wanted to apply bSearchable and bSortable to specific columns in just some tables. Using the above method this did not seem possible because each table has a different number of columns the aoColumns could not be used.
Next, I tried adding sorting_disabled to the columns in the html to manually disable them. However, this did not work as the sorting class was still added to the column and takes precedence over the class I manually added.
Next I tried initiating each table individually using the id such as this:
[code]
function renderDataTable(id){
var oTable = jQuery(id).dataTable( {
"sScrollY": "200px",
"bScrollCollapse":true,
"sDom": 'rt<"bottom"flp>',
"bPaginate": false,
"bStateSave": false
} );
[/code]

After each table is created this function is called passing a unique id such as "#table1". However, I've run into a problem trying to do this. When the datatables are initiated they look like they should. But, if I try to use any of the functionality such as search or sort it doesn't work. It seems that creating the datatables like tihs causes the javascript to break. Any ideas on what could be causing this? Is there a better approach to handling my problem?
Note the number of tables, number of rows in table, and number of columns in the table are dynamic. So, the solution must be loopable.

Thanks for your help. Let me know if I can provide any additional data.

allan

Not sure why that wouldn't work - are you getting any Javascript errors?

However, I believe there is a better way to do this. Have a look at aoColumnDefs (rather than aoColumns): http://datatables.net/usage/columns - this will allow you to target columns which a certain class (on the TH element) to do certain things - allowing a single initialisation call. Also make sure you are using DataTables 1.7.3, as 1.7.2 had a bug in it for multiple tables with different columns.

Allan

bryceray1121

I like the columnDefs they do make the solution easier. However, I would still like to be able to initiate the dataTables individually as I want to save the individual initiations for future use. I'm trying to debug the problem but their doesn't seem to be much to debug. This error outputs no errors in any browser. It almost seems as if the onclick are just not being assigned properly. When I click on the sort icon or type in the search box nothing happens. However, I know sort is working because the initial sort is happening on page load.

If I can't get this fixed is their a better way to to access the initiated tables after the fact. The way I'm trying to do it this way is I'm saving each table instance as such:
oTable["table1"] = new $(id).dataTable(...);
oTable["table2"] = new $(id).dataTable(...);

With the intent of using it for something like
oTable["table1"].fnSettings()...

On the other hand if I initiate the tables in a single instance using a common class. Is there a way to then access an individual instance using the same tables unique id?

Thanks for the help. Let me know if there is something I can do to further debug this issue.

bryceray1121

I've also noticed that initializing the tables individually as described above breaks the following function:
[code]
function fnShowHide( iCols, tag)
{
for(var i=0;i

allan

> Is there a way to then access an individual instance using the same tables unique id?

Yes absolutely. You can use $.fn.dataTableExt.iApiIndex to say which instance you want to work on. For example:

[code]
var tables = $('.datatable').dataTable();
$.fn.dataTableExt.iApiIndex = 1; // work on the second table
tables.fnFilter( 'hello' );
[/code]
> An update never visibly happens in the webpage to add/remove the columns.

Very interesting! Are you able to link to an example showing this issue? Looking at that code, I don't see anything obviously wrong with it...

Regards,
Allan

bryceray1121

I see this method accesses the table by the number (order) in which it was created. Is there a way to access the table instance specifically by the tables pre-defined id string?

So access it by this id when it is initiated on the class dataTable.

> Very interesting! Are you able to link to an example showing this issue? Looking at that code, I don't see anything obviously wrong with it...

Unfortunately, I don't have a copy online its all on my local pc at the moment. But, I suspect the issue will be resolved when I fix the issue regarding the handling of multiple tables.

allan

Yes you can access the multiple tables like you suggest:

[code]
$('table').dataTable();
$('#example').dataTable().fnFilter('gecko');
[/code]
DataTables matches against the table node, so as long as the selector resolves to that, it should work okay.

Allan