Clear on custom filter

sparkle1

Hello! DataTables is awesome, I love it!

I have a custom filter and I'd like to the visitor to be able to press a button to clear the custom filter so that it goes back to showing all results again. (Much like a form reset button).

Is this possible? Below is the code I have so far:

Thanks!


var oTable;
var jqFilter;

$(document).ready(function() {
jqFilter = $("input[name='custom_filter']");

oTable = $('#example').dataTable( {
sPaginationType: "full_numbers",
bFilter: false,
bSort: false,
bInfo: false,
bLengthChange: false,
aaSorting: [[0,'desc']]
} );

/* Add event handlers */
$('#filter_work').click( function() {
oTable.fnFilter( 'Work', 2 );
jqFilter.val('Work');
} );

$('#filter_events').click( function() {
oTable.fnFilter( 'Events', 2 );
jqFilter.val('Events');
} );

$('#filter_community').click( function() {
oTable.fnFilter( 'Community', 2 );
jqFilter.val('Community');
} );

$('#filter_fitness').click( function() {
oTable.fnFilter( 'Fitness', 2 );
jqFilter.val('Fitness');
} );

$('#filter_career').click( function() {
oTable.fnFilter( 'Career', 2 );
jqFilter.val('Career');
} );


$("input[name='custom_filter']").keyup( function() {
oTable.fnFilter( '', 2 );
oTable.fnFilter( this.value );
} );
} );





Search Latest News:



Work Related
Community
Events
Fitness
Career

allan

Hi sparkle1,

Thanks for the compliments - much appreciated!

It looks like you are most of the way there with what you are looking for. To clear the column filter you just need:

oTable.fnFilter( '', 2 );

Like you have in the keyup() function. Global filtering is achieved the same way ( oTable.fnFilter("") ). You will need to clear the text of the input element as well, which is just a case of setting the value of the text input to be blank ( $("input[name='custom_filter']").val('') ).

Hope this helps,
Allan

sparkle1

Thanks Allan!

I added this to the event handlers:

$('#filter_all').click( function() {
oTable.fnFilter( '', 2 );
jqFilter.val('');
} );


and this to the navigation:

All

And it's working perfectly! Maybe it will help someone :)

Thanks again :)

sparkle1

One other question regarding this modification:

Is it possible to give a class to the navigation when a certain category is clicked?

For example, when the "Work Related" button is clicked, it should be given a class of "current":


All
Work Related
Community
Events
Fitness
Career


Likewise, the "All" button should be given a class of "current" by default on page load??

Thanks again, sorry for all the questions!

allan

Hi sparkle1,

Again it looks like you are most of the way there with regard to the classes. To have the default as 'All', just have the 'current' class coded in the HTML (your last post shows it against 'Work Related').

Then to change the class, you can use your click function - something like this:

[code]
$('#filter_community').click( function() {
$('span.current').removeClass('current');
$(this).addClass('current');
oTable.fnFilter( 'Community', 2 );
jqFilter.val('Community');
} );
[/code]

Allan

dgtaylor22

To clear the built-in search box you can use

$("#XXXX_filter input").val('');

Where XXXX is the name of your datatable. There may be a better JQuery way, but this works.

This in connection with oTable.fnFilter(''); cleared the built-in search filter.

allan

Slight cross talk here perhaps? sparkle1's code was correct for his (her?!) usage since there is an HTML input box with the name "custom_filter". If you want to clear the filter for the built-in filtering option - then yes, this is the correct way to do it.

Allan

dgtaylor22

yeah, a little bit. I was trying to add how to clear the value in the built-in filter box here since this thread was the starting point for me. I clarified my initial post.

allan

Nice one - thanks for rounding it off. This question has been asked a couple of times, so I hope this will help others!

Allan

npb

A bit more information for those using the [code]"bStateSave" : true[/code] option.

It looks like you have to clear the saved state as well as the input fields before reset will work as you expect. For example, to reset the per-column searches properly, I had to do the following in addition to resetting the values and className as described above:
[code]
var oSettings = jQuery('#exampletable').dataTable().fnSettings();
for ( var i=0 ; i

amyth

I'm doing something which is pretty much the same as Sparkle1.

Data table that has in it's DOM a search all div that has got a drop down list with column names and a text box with search and reset buttons. The user selects the column that they want to search, enter the search text and click search.

The Search functionality works a treat :) however I'm having a bit of a problem with the "Reset" of the grid.

$('#TableReset').click(function() {
oTable.fnFilter('', $('#DDLSearchColumn').val());
});

The reset works perfectly fine when the user searches for "Column 1" and stays on that ddl option when clicking reset. However, if they change the DDL option and click the "Reset" it doesn't work. I can see why that would not work as the sSearch_0 will still have the search criteria and when the user changes the DDL the reset function above will be trying to fnFilter on a completely different column.

I don't know what I can do now!

Any 'pointing in the right direction' is much appreciated.

amyth

I have found a way to reset the datatable but it comes at a high cost.

Currently, I am doing this:

var colCount = $('#DDLSearchColumn option').size();
for(i=0;i<=colCount;i++){
oTable.fnFilter('', i);
}

What I hate about the above code is that the number of columns on my datatable is 17!! That is how many times it is going to the server!

There has got to be a better way!