Clear on custom filter
Clear on custom filter
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
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
This discussion has been closed.
Replies
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
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 :)
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!
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
$("#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
Allan
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
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.
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!