Multiple Tables - Initialisation & CSS
Multiple Tables - Initialisation & CSS
Hi. Let me preface this by saying that I only started playing with Datatables a couple of days ago, and I am amazed at what can be done. Also, I am no great shakes at Javascript etc., so this will probably be a dumb question, but here goes.
I have a page with two tables (currently they are identical while I work this out). I have managed to get them working using:
jQuery(document).ready(function() {
jQuery('.display').dataTable( {
"sScrollY": "300px",
"bPaginate": false,
"bAutoWidth": true
} );
} );
Both look the same, and sorting/filtering works a treat.
Both tables have id="example". I want to set the two tables up differently: Columns, default sorting, Scroll height etc. how do I achieve this? From reading the forum, I gather I can change the
jQuery('.display').dataTable() call, to something like:
oTable = jQuery('#example').dataTable()...
oTable2 = jQuery('#example2').dataTable()...
and change the id= of the second table to id="example2". Is this correct? Would I then have to revisit the CSS files and duplicate all the #example entries as #example2 entries. Or is there an easier way.
Any help you could give this newbie would be appreciated.
I have a page with two tables (currently they are identical while I work this out). I have managed to get them working using:
jQuery(document).ready(function() {
jQuery('.display').dataTable( {
"sScrollY": "300px",
"bPaginate": false,
"bAutoWidth": true
} );
} );
Both look the same, and sorting/filtering works a treat.
Both tables have id="example". I want to set the two tables up differently: Columns, default sorting, Scroll height etc. how do I achieve this? From reading the forum, I gather I can change the
jQuery('.display').dataTable() call, to something like:
oTable = jQuery('#example').dataTable()...
oTable2 = jQuery('#example2').dataTable()...
and change the id= of the second table to id="example2". Is this correct? Would I then have to revisit the CSS files and duplicate all the #example entries as #example2 entries. Or is there an easier way.
Any help you could give this newbie would be appreciated.
This discussion has been closed.
Replies
why you will duplicate css entries, just add the id of second table where you have written your css for first table.
Regards,
Vivek
This is actually invalid HTML - the id attribute must be unique to only one element per page. If you run your page through the W3C validator it will confirm this.
So what you can do is this:
[code]
[/code]
[code]
jQuery(document).ready(function() {
jQuery('.display').dataTable( {
"sScrollY": "300px",
"bPaginate": false,
"bAutoWidth": true
} );
oTable = jQuery('#example').dataTable();
oTable2 = jQuery('#example2').dataTable();
} );
[/code]
So a single initialisation, but still both object directly available. There are other ways as well (like iApiIndex etc).
Allan
Vivek. I was merely asking whether I needed to duplicate the CSS, which I now know I don't. But thanks.
Allan. I knew what I had was not correct, even though it (sort of) worked. I did as you described, and can now initialise the tables independently. DataTables is a fantastic package. Thanks for putting the time into its development (and support).