FixedColumns for more than one table?
FixedColumns for more than one table?
I have two scrollable datatables and both should have FixedColumns.
E.g.:
[code]
var table1= $('#table1').dataTable( {
...
});
new $.fn.dataTable.FixedColumns(table1);
[/code]
and
[code]
var table2= $('#table2').dataTable( {
...
});
new $.fn.dataTable.FixedColumns(table2);
[/code]
In this constellation there will be no FixedColumns in the tables.
If I remove the [code]new $.fn.dataTable.FixedColumns(table2);[/code] e.g. from table2, then table1 shows the FixedColumn again.
Vice versa.
How is it possible to have two or even more tables with working FixedColunms in one webcontent?
E.g.:
[code]
var table1= $('#table1').dataTable( {
...
});
new $.fn.dataTable.FixedColumns(table1);
[/code]
and
[code]
var table2= $('#table2').dataTable( {
...
});
new $.fn.dataTable.FixedColumns(table2);
[/code]
In this constellation there will be no FixedColumns in the tables.
If I remove the [code]new $.fn.dataTable.FixedColumns(table2);[/code] e.g. from table2, then table1 shows the FixedColumn again.
Vice versa.
How is it possible to have two or even more tables with working FixedColunms in one webcontent?
This discussion has been closed.
Replies
Can you please link to a test case showing the error (as noted in the forum rules :-) ).
Allan
thx for your answer an the effort of writing the test code.
I would like to show you some code under jsbin, but I do not know how to write two html pages in one HTML-Inputfield. If I write two htmls in die HTML-Inputfield I can´t show you the mentioned issue.
Nevertheless I tried your example code to figure out what´s going wrong in my code.
The difference is, that I´m having the tables not in one html but in two. Both htmls include the same css and the same javascript part. The issue is that the first "example"-table has a fixed column. But in the other html, where the "example1"-table is implemented there is no fixed column.
When I paste the two example-Tables in one html it works fine (as shown in your example).
The other thing is, that when I call the tables with FixedColums in Firefox everything is great (when having both table in one html). Unfortunately there are no fixed columns in IE at all.
Here the example code:
test1.html
[code]
<!DOCTYPE html>
DataTables - JS Bin
Name
Position
Office
Age
Start date
Salary
Name
Position
Office
Age
Start date
Salary
Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$3,120
Garrett Winters
Director
Edinburgh
63
2011/07/25
$5,300
Ashton Cox
Technical Author
San Francisco
66
2009/01/12
$4,800
[/code]
test2.html
[code]
<!DOCTYPE html>
DataTables - JS Bin
Name
Position
Office
Age
Start date
Salary
Name
Position
Office
Age
Start date
Salary
Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$3,120
Garrett Winters
Director
Edinburgh
63
2011/07/25
$5,300
Ashton Cox
Technical Author
San Francisco
66
2009/01/12
$4,800
[/code]
test.js
[code]
$(document).ready( function () {
var table1 = $('#example').DataTable( {
scrollX: true
} );
var table2 = $('#example1').DataTable( {
scrollX: true
} );
new $.fn.dataTable.FixedColumns( table1 );
new $.fn.dataTable.FixedColumns( table2 );
} );
[/code]
test.css
[code]
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
div.container {
width: 500px;
margin: 0 auto;
}
td {
white-space: nowrap;
}
[/code]
Do you know what I could do, to have the fixed columns set even if I have the tables in two different html pages?
And do you know which browsers are supported by jquery datatables and FixedColums.js?
Thx.
DataTables: IE6+ (and all other browsers)
FixedColumns: IE8+ (and all other browsers)
I'm afraid I don't really understand the other, more general question. You have two different tables, on two different pages? That's fine, just initialise each either individually or have them share an id. To understand why it isn't working, I'd need a link to the page.
Allan