Unlinked Filters

blaxus

Hey, I am currently using this simple filter option as seen here:
http://www.datatables.net/examples/api/multi_filter.html

If at all possible, I would like to put the search input boxes myself because these only get added to the bottom, and that is useless to me.
I would also not like to search on all fields (not the first one) and then they get pushed out and the fields are in the wrong section then.

So, can anyone please tell me how I can use my own HTML Input to filter on a certain field?
Thanks,

fbas

You can put the input boxes anywhere you like and the logic will be the same. you could put the filters in the header rather than the footer (just be aware that you need to tell DataTables which row in the header is the row to put the sort listeners on (default is to use the bottom row). use "bSortCellsTop": true to specify top row).

The logic behind binding a given text input to a column is simply to take the value of the text and run oTable.fnFilter(value, columnnumber) for the given column number. This is what the example you linked to does (getting the column number, in the example, from it's location in the footer row).

[code]
var oTable = $('#example').dataTable();

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
[/code]

so it wouldn't matter if you put text boxes far far outside the table. You just need some javascript logic to take the value and run it through fnFilter.

the example above uses the "keyup" event to know when it needs to send a new value to the fnFilter. You can use any event (i.e. attach it to a button click event if you want to only filter after the user clicks a button).

blaxus

Hey, Thanks, I did not know much about jQuery or Datatables but I'm a PHP coder so I get around.
This post really helped me out.

It works now, Thanks :D