Placing Multiple tables on Same Page

iEdit

On my website I have a drop down list that displays a different . Each displays a different list, but only the first list is showing the filter and sort features. How would I go about changing this so that I can get these features for each table I have setup?

This page: http://iedits.com/testing

GregP

There are different ways you could do it, I guess.

Here's probably the easiest way: make your empty tables in the markup, but don't call DataTables on them. (or do... it's up to you; if you do it will take more requests and more time).

Then on the select event, create a new dataTables object. Once it's initialized, you don't remove it; you just keep it in the DOM and hide it if need be. If they select something else from the dropdown, same deal. Here's some code for a method that gets fired after I actually "submit" a search. You would listen for the "select" event instead. I have from a page in which the user can choose between a view of file transfers sorted by Session or by Filename:

[code]
fcSearch.selector = function(selected) {
$('.dataTables_wrapper').hide(); // why sort'em out? Hide'em all!
if(selected === "sessionSearch"){
if(fcSearch.sessionTable) {
$('#sessionSearch_wrapper').show();
fcSearch.sessionTable.fnDraw();
} else {
$('#sessionSearch').show();
fcSearch.sessionTable = $('#sessionSearch').dataTable(fcSearch.initializer('sessionSearch'));
}
} else if (selected === "fileSearch") {
if(fcSearch.fileTable) {
$('#fileSearch_wrapper').show();
fcSearch.fileTable.fnDraw();
} else {
$('#fileSearch').show();
fcSearch.fileTable = $('#fileSearch').dataTable(fcSearch.initializer('fileSearch'));
}
}
}
[/code]

I just wrapped up prototyping today, so it's not DRY. But then again, when it's not DRY it's pretty easy to understand. ;-) I'll step through anyhow.

1. My markup has all the tables hidden to start with. On submit, I first hide all elements with the class 'dataTables_wrapper', which is a class that gets automatically added after a table is initialized. This way I don't have to look for and hide individual tables, I just hide'em all if they're showing.

2. I pass the value in from a dropdown. The value corresponds to the ID of the table, which will enable me to make it more DRY later. But for now I just do everything in manual way.

3. I check the value in a conditional. Assuming the value is "sessionSearch" I go into that condition

4. Inside sessionSearch, the first thing I do is see if I have an object called "fcSearch.sessionTable". If I do, instead of initializing (which I assume is already done) I show its wrapper (make it visible) and call fnDraw() on it. If there's no object already, I show the table itself (the wrapper isn't made yet!), then initialize it... initializing adds the wrapper and pulls the data (ie. it renders a table).

That's it. When they switch to the other type of view, I hide all the wrappers again, show the wrapper (or table) that's being rendered and then draw (if initialized) or initialize (if not initialized yet) it.

It's a bit of swinging a heavy hammer, but it gets the job done. Round two I will actually use the value being passed in ("selected") in a more intelligent way and reduce the repeated methods (drawing, showing, initializing) into reusable pieces.

essexsteph

All of your tables have the same id - "example" which isn't valid CSS and is causing DataTables to only set up the filter and sort functions for the first table.

You'll need to give each table a different id and then initialise them individually or follow Allan's example and initialise by a class - see http://datatables.net/release-datatables/examples/basic_init/multiple_tables.html.

Steph

GregP

So the other thing I totally forgot to mention is that in addition to the different IDs (necessary!) I have a function that returns an initialization object. This is part of trying to keep things DRY. Without giving too arduous an example (mine are pretty big!) it boils down to this truncated sample:

[code]
fcSearch.initializer = function(table) {
var initCustom,
initReturn,
initShared = {
"bJQueryUI" true,
"sDom" : 'R<"H"lr>t<"F"ip>',
"bServerSide" : true,
"etc" : "etc" // etc!!
}

switch(table) {
case('sessionSearch'):
initCustom = {
"sAjaxSource": "/rs/archivedTransfers",
"etc" : "etc" // etc!!
break;

case('fileSearch'):
initCustom = {
"sAjaxSource": "/rs/archivedFiles",
"etc" : "etc" // etc!!
break;
}
initReturn = $.extend(true, {}, initShared, initCustom);
return initReturn;
}
[/code]

Make an shared object, decide what needs to be added to it, and extend the shared object with the extra custom stuff, making a new object that gets returned.