Setting sWidth for 2 different Tables on same page?
Setting sWidth for 2 different Tables on same page?
Hello,
I have 2 tables on my page each of which have a class name of [code] .data-table [/code] These tables also have unique ID's [code] #table1 [/code] and [code] #table2 [/code]
I am using [code] sWidth [/code] to handle the column widths but as the number of columns in Table 2 is different to table 1 the table breaks as I am defining sWidth globally using the class of /date-table (see code below).
How can I define sWidh uniquely for each table? I have tried splitting up the JS using seperate id's for each table but does not work and table breaks.
My JS which handles the table is as follows
[code]
$('.data-table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""fl>t<"F"p>',
"bAutoWidth": false,
"aoColumns": [{"sWidth":"5%"},{"sWidth":"10%"},{"sWidth":""},{"sWidth":""},{"sWidth":"50%"}],
"oLanguage": {
"sLengthMenu": "Show _MENU_",
"sSearch": "Filter"
}
});
[/code]
So essentially I want to define sWidth for Table 1 and a different sWidth for Table 2, all other variables are the same.
Thanks
I have 2 tables on my page each of which have a class name of [code] .data-table [/code] These tables also have unique ID's [code] #table1 [/code] and [code] #table2 [/code]
I am using [code] sWidth [/code] to handle the column widths but as the number of columns in Table 2 is different to table 1 the table breaks as I am defining sWidth globally using the class of /date-table (see code below).
How can I define sWidh uniquely for each table? I have tried splitting up the JS using seperate id's for each table but does not work and table breaks.
My JS which handles the table is as follows
[code]
$('.data-table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""fl>t<"F"p>',
"bAutoWidth": false,
"aoColumns": [{"sWidth":"5%"},{"sWidth":"10%"},{"sWidth":""},{"sWidth":""},{"sWidth":"50%"}],
"oLanguage": {
"sLengthMenu": "Show _MENU_",
"sSearch": "Filter"
}
});
[/code]
So essentially I want to define sWidth for Table 1 and a different sWidth for Table 2, all other variables are the same.
Thanks
This discussion has been closed.
Replies
You need to initialise the two tables with different settings, since you want different settings for the two tables :-). Using the IDs sounds like a good way to do. If that doesn't work for you, please link to a test case.
Allan
[code] $('#table1').dataTable [/code]
[code] $('#table2').dataTable [/code]
but it did not work or treat them individually.
I will try link back with a test case on JSFiddle. Right now I am working locally.
Cheers