Multiple Search(filter) Boxes

ryansmith44

Hi,

I have been looking for a long time and at other jQuery solutions as well.

Is it possible, with datatables to search on more than one input table?

for instance, if I had three inputs for search, it acts as three filters.

so if we look at the standard example http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html,

the first search box could filter for all platforms that are 'Win 95+ / OSX.2+'

the second search box could then filter for all rows that are css grade '8' and the third one could filter for all browsers that are 'opera'

so effectively, the tables would be filtered to show only values where any of the three search boxes matched. so rather than an eingle excet filter, have a multipe or filter?

can this be done with datatabes? any examples? possible?

Thanks as always,

tangerine

[quote] ....search on more than one input table[/quote]
If that is really what you mean, I have no idea.
If you mean "....search on more than one column", you might want this:
http://www.datatables.net/plug-ins/filtering#functions_type_based

allan

The fnFilterAll plug-in will filter all tables on a page, and the new API in 1.10 also has that ability, but that isn't the functionality that is then described. It sounds like you want individual column filtering ( fnFilter ) or custom filtering as tangerine says.

Allan

jsmith88

If this were me, I'd do it with a custom search function...

Add three input boxes -- or however many you want...
[code]// create three search boxes -- one for platform, one for CSS grade, one for browser



[/code]

Add a custom filtering function. By doing this, we'll be able to compare each
input box to its own specific column:
[code]// every time a filter is applied, this is is invoked for every row in the table
var check_all_input_values = function(oSettings, aData, iDataIndex) {

// check to see if this row matches all three of the filters. if any one
// of them fails, return false to exclude it from results

// compare the value from the platform search box to the
// value in the platform column of this row (index 0 == platform column)
// if it DOES NOT match the search term, exclude the result
var platformSearchValue = $("#platform_search").val();
var thisRowsPlatformValue = aData[0];
if(!(thisRowsPlatformValue.match(platformSearchValue)) {
return false;
}

// compare the value from the grade search box to the
// value in the grade column of this row (index 1 == grade column)
// if it DOES NOT match the search term, exclude the result
var gradeSearchValue = $("#grade_search").val();
var thisRowsGradeValue = aData[1];
if(!(thisRowsGradeValue.match(gradeSearchValue )) {
return false;
}

// compare the value from the browser search box to the
// value in the browser column of this row (index 2 == browser column)
// if it DOES NOT match the search term, exclude the result
var browserSearchValue = $("#browser_search").val();
var thisRowsBrowserValue = aData[2];
if(!(thisRowsBrowserValue.match(browserSearchValue)) {
return false;
}

// all three filters passed, so include this row!
return true;
};

// add custom filtering logic!
$.fn.dataTableExt.afnFiltering.push(check_all_input_values);

var myTable = $("#table").dataTable({
aoColumns: [
{ sName: "Platform" }, // "Platform" column is index 0...
{ sName: "CSS_Grade" }, // "CSS Grade" column is index 1...
{ sName: "Browser"} // "Browser" column is index 2...
]
});
[/code]

Add listeners to the input box. Any time someone starts typing in the boxes, draw the table again. This will cause our custom filtering function to be applied.
[code]
// every time someone types in any one of the input boxes, let's
// trigger the custom filter function
$("#platform_search,#grade_search,#browser_search").on("keyup", function() {
myTable.fnDraw(); // redraw the table, which will automatically invoke our filter again
});[/code]

I hope this helps, because I'm 99% sure this does what you want. This is untested, but the premise should work... I've done something very similar.