Filters in head section

Joy

Is there any way I can use the example below, and have the filters on top and retaining the other features like pagination and sorting...
Link : http://datatables.net/release-datatables/examples/api/multi_filter_select.html

Joy

If i use :

/* Add a select menu for each TH element in the table footer */
$("thead th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
----------------------------------------

It simply removes the sortable feature from the head

Joy

Anyone help please.......

fbas

Can you grab the footer, copy to a new div/table above the table?

Joy

wont work.... the two table id s will override... for havin all the functionality if there are repetition of same id all the features are going to be repeated for both the div/tables

Joy

i need something like this .. i somehow need to move the filters to the top ... I think its possible using
http://datatables.net/release-datatables/examples/basic_init/dom.html

but i cant seem to get it right..

Joy

can anybody please look into this .....

cdaigle

Hi Joy,

Where exactly do you want the filters? Before or after the normal column headers?

Either way, you should be able to do the following after dataTables is initialized:

[code]
$("example thead tr").clone().appendTo($("example thead")).find("th").each(function( i ) {
//code from multi-filter example
} );
[/code]
Disclaimer: code has not been tested.

Note that the clone ensures we have the same # of th's so that we can iterate over all columns. the appendTo ensures it is put after the column headers. This could be changed to prependTo to place before.

Hope this helps,
Chris.

Joy

hm i wl give it a try. I want the filters to appear exactly above the column head section . so the column head itself retains the sortable property.If i just change the tfoot to thead, instead of showing the column head .. the filters appear . so its a war between filters and sortable column head

Joy

k tried .. it didn't seem to work. please see if the sDom can do the job

cdaigle

Hi Joy,

I will look into using the sDom for this.

As a side note, I was able to get my example to work on this examples page (having the filters above the column headers) as well as leaving sorting/paging alone: http://datatables.net/release-datatables/examples/basic_init/zero_config.html

Just execute the following javascript into the browser when that page is open (using Chrome Developer, IE Developer, FireBug, or typing it into the address bar prefixed with 'javascript:'):

[code]
$("#example thead tr").clone().prependTo($("#example thead")).find("th").each(function(i) { $(this).attr("class", "").html("").change(function() { oTable.fnFilter($(this).val(), i); } ); } );
[/code]

Note that the selects are purposely empty as that page does not have the api functions included for multi-filters. (You would just replace my dummy html data with a call to the fnCreateSelect function)

Let me know if this works for what you need.

Also, instead of prepending it to to the thead, you could easily create an empty table above the dataTable and append it to that instead (change .prependTo($("#example thead")) to .appendTo($("#id_of_my_other_element")) ).

Hope this helps,
Chris.

Joy

My dear friend . this works perfectly..... Thanks a lot Cris.

but can u please explain me how this is happening.I have used it like this.

$("#example thead tr").clone().prependTo($("#example thead")).find("th").each(function(i) {this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));

Joy

Here is the ready function
[code]
$(document).ready(function() { /* Initialise the DataTable */
var oTable = $('#example').dataTable({"oLanguage": {"sSearch": "Search all columns:"} });

/* Add a select menu for each TH element in the table footer */


$("#example thead tr").clone().prependTo($("#example thead")).find("th").each(function(i) {this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));

$('select', this).change(function() {oTable.fnFilter($(this).val(), i); }); } );
}

[/code]

cdaigle

Is your implementation not working or do you just want to know how it works?

In anticipation of it being the second, I will elaborate.

$("#example thead tr").clone() -- this copies the thead row (DOM element) that exists (the column headers)
.prependTo($("#example thead")) -- this appends the cloned object (a thead row) to the thead (at the beginning)
.find("th") -- this searches the current element (the new row we cloned and appended) for all th elements
.each(function(i) ... -- this loops through each of the th elements and modifies them (i represents their index in the list of th's, which works well for us since it matches dataTables indices)

I remove all classes at this point via .attr("classes", "") because it was still clickable and had sort icons (removing the classes removes those properties). my .html() is equivalent to your this.innerHTML.
We both have the same change() function, which grabs the selected option for the current column and sends it dataTables to filter the current column with.

I wasn't entirely clear on what you were asking for here, so please let me know if I am off-track.

Cheers,
Chris.

Joy

Dude , its working perfectly as u said. Thanks for the elaborate explanation. I really appreciate it