fnFilter with Individual Column Search Boxes

majortom

I've got a table that loads with fnFilter enabled. I have it set that that it searches a specific column using the example shown here: http://datatables.net/examples/api/multi_filter.html

When I call fnFilter, the code looks like this

[code]
oTable.fnFilter( "some string here", 0 );
[/code]

I would like the string that is passed to appear in that column's search box in the footer of the table (in this example, "some string here" would be in the first column's search box in the ). That way, the user can change the string being passed through fnFilter. Right now, the string doesn't appear in any of the search boxes, so if the user wants to change the string, they have to go back to the previous page (which is a pain).

Also, one more question. How do I get the filtering to match the whole word only (but ignore case still)? E.g. If I search 33, I don't want results like 433, or 60332. I only want results with 33.

Thanks for the help!

allan

DataTables only provides a column filter API - it doesn't provide the column filtering inputs. So it has no idea about the text area input in the footer that you have. If you want the text inserted into that element, you need to put it in yourself :-).

For the second question, use a regular expression: `'\b'+input` for example. Enable regex filtering and disable smart filtering with your fnFilter call.

Allan

majortom

I'm confused. What would the call for fnFilter be? Where do I put '\b\+input?

majortom

And if I can't put it in the column search box, then can I put it in the global one? In the API, it says this is possible, but there is no example code of it

allan

You'd put the fnFilter call wherever you want to attach the filtering event. fnFilter is the function you call when you want to filter the table.

[code]
$('#myColumnFilterInput').on( 'keyup change', function () {
table.fnFilter( '\b'+$(this).val(), 1, true, false );
} );
[/code]

where `table` is the DataTable instance and `1` is column index one (which obviously you'd change to which column you want).

Allan

majortom

Okay, that looks good! 1 more question about this. If I want to clear the fnFilter with a link, would I use something like this?

[code]
Click to reset fnFilter


function resetFilter () {
oTable.fnFilter("", 0); // Reset first column
oTable.fnFilter("");
}

[/code]

allan

Yes. But I'd very much recommend using DOM0 events - use jQuery events.

Allan

majortom

Well, the problem is that the code I posted doesn't work exactly work. I have made a work around though that solves this problem, as well as the one I started with. Here is where I generate the column search boxes

[code]


<?php // puts the correct number of column search boxes in the footer
for ($j = 0; $j < 9; $j++) { // 9 columns in my table, as an example
// $t is the category from a previous page, $j is the column index, $q is the search string
if ($t == "category" && $j == 0) { // puts the search term in the first column if the user selected the radio button "catergory" from the previous page
echo '';
} else { // put Search Column in all the other columns
echo '';
}
}
?>

<!-- Just what I put in the last column because it isn't searchable -->
Top ↑ <!-- Link to the top of the page -->


[/code]

The default text that is in the search box is "Search Column". I am replacing Search Column with a string (stored in the variable $q). Here is what I have for the search boxes

[code]
$(document).on('keyup', 'input[data-search]', function (e) {
oTable.fnFilter( this.value, $(this).attr('data-search') * 1 ); // * 1 to make an integer
});

$("tfoot input").each(function (i) {
asInitVals[i] = this.value;
});

$("tfoot input").focus(function () {
if (this.className == "search_init") {
this.className = "";
this.value = "";

// if the user clicks the search box, clear the filter
if ($(this).attr('data-search') * 1 == 0) {
oTable.fnFilter("", 0);
}

oTable.fnFilter("");
asInitVals[$("tfoot input").index(this)] = "Search Column"; // Replace the search term with Search Column
}
});

$("tfoot input").blur(function (i) {
if (this.value == "") {
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
[/code]

In the code above, when the user clicks the correct input box, that clears fnFilter. It also reverts the custom search term back to Search Column.