Individual Column Filtering example is very unclear

dgreen

I am having significant difficulty understanding the logic behind implementing the individual column filtering as described in the examples. Obviously, it is necessary to append callbacks to the footer input fields. However, it is unclear in any of the examples how information or objects are actually appended to the footer area. In each example involving the footer, it seems to be "auto-magically" populated with the necessary data/objects. I cannot find any description of how to implement these objects in either the individual column filtering example (both input and and select elements), the footer callback example, the general usage command structure or even the API section of the site.

Based on looking around the web, this is a common issue that no one seems to take the time to answer. If someone could share some source code on their implementation of this feature in full or point me to a post that has a more detailed explanation than the example on how to use it, I would be grateful. I cannot seem to locate any and this feature is proving very frustrating.

I'd also suggest updating the example with this information to make it clearer how to implement the desired effect, even if it's just pointing to additional pages as a "further reading" option.

Thank you to any who can help.

allan

> However, it is unclear in any of the examples how information or objects are actually appended to the footer area

What objects? Do you mean the INPUT elements? They are just in the HTML:

[code]









[/code]

The Javascript then hooks on to those elements and calls fnFilter. The point of the example is to show the use of fnFilter - you can set the column filtering input up any way you want - just call fnFilter with the required filtering criterion :-)

> Based on looking around the web, this is a common issue that no one seems to take the time to answer.

I don't recall seeing this highlighted before, but I will look into improving it.

Allan

dgreen

Allen, thank you very much for the reply.

If you're using a static table, appending the tfoot to the html block makes sense. But what about when doing an AJAX query? For instance, I do not seem able to load a table (even with the default data listed statically in an aaData object) without using the aoColumns parameter. I get an error of "Cannot read property asSorting of undefined". Based on this usage, it suggests that a parameter is needed to define both the header and the footer when you're trying to use the datatable dynamically. Here's a snippet based on the examples that I'm implementing on my webpage:

[code]



var aDataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C']
/* abbreviated data set */
];

$(document).ready(function() {
$('#dynamic').html( '' );
oTable = $('#activeTable').dataTable( {
"aaData": aDataSet,
"bJQueryUI": true,
"bPaginate": false,
"oLanguage": { "sSearch": "Search all columns:" },
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "A";
}
return sReturn;
}
}
]
});
};







[/code]

var aDataSet is designed to be cleared and dynamically reallocated through the lifetime of the window (though the code for replacement and redrawing of the table is not directly relevant to this snippet). Using your own sample data set, I have no way of avoiding setting the aoColumns parameter for oTable, and thus have no apparent way to edit the thead element directly in the plugin's API. Now, I COULD use javascript/jquery to cram in the thead section, and by extension cram in a tfoot section. But is that the intended design? It seems unintuitive given how the thead already has support in the API.

Am I making sense on where my confusion comes from?

allan

The only thing that seems to be stopping your example working for me, is the syntax error with a missing ) at the end: http://live.datatables.net/upoxuq/edit#javascript,html,live .

> Now, I COULD use javascript/jquery to cram in the thead section, and by extension cram in a tfoot section. But is that the intended design?

Yes :-). I could make an interface for DataTables and allows complete control over the THEAD and TFOOT elements, with the ability for developers to specify exactly what is needed for attributes, col/rowspan, classes, HTML content, etc etc but that API would basically be a wrapper around the DOM interface, and likely add considerable weight and complexity to the DataTables library, so I didn't see the benefit of doing that, when the DOM interface is already there.

So if you want to add a TFOOT with INPUT elements in it to a dynamically created table, it is a simple case of inserted the elements as you would with any other table (DOM, or HTML string manipulation - entirely up to you).

Now, having said that, I do have a long term plan for DataTables ( http://datatables.net/development/roadmap ) to add "renderers" which will allow you to specify custom rendering controls for all HTML aspects that DataTables draws on screen - so you could use that to create a footer with inputs. However, it will still basically come down to adding INPUT elements via DOM methods.

So that's why this ability is not available in DataTables core - however there is a plug-in from Jovan Popovic that can create some of the controls that you want on-the-fly - see: http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html

Allan

dgreen

Ok, thank you very, very much Allen. I was convinced I was missing something obvious and was hesitant to hack a solution together in case I broke something I wasn't understanding.

This is a great plug-in, by the way. I can't wait to see your future versions :)