Reset button for input and select?
Reset button for input and select?
Hi Everyone,
I built a server-side datatable using third-party filters (as described at http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html) instead of default filters because I wanted a mix of input boxes and select lists for my columns.
It is working fine so far, but I want to add a Reset button to a) bring back all the data that was filtered out, and b) clear the input boxes and put the lists back to their default, which is the first item in the list.
Has anybody written such a thing in jquery and if so could you share how you did it? Just hoping somebody can give a start. I know there is an API called fnClearFilter (right?) but I don't know how to manipulate the inputs and selects that are created by Jovan's filtering plug-in.
Thanks,
Bee
I built a server-side datatable using third-party filters (as described at http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html) instead of default filters because I wanted a mix of input boxes and select lists for my columns.
It is working fine so far, but I want to add a Reset button to a) bring back all the data that was filtered out, and b) clear the input boxes and put the lists back to their default, which is the first item in the list.
Has anybody written such a thing in jquery and if so could you share how you did it? Just hoping somebody can give a start. I know there is an API called fnClearFilter (right?) but I don't know how to manipulate the inputs and selects that are created by Jovan's filtering plug-in.
Thanks,
Bee
This discussion has been closed.
Replies
I don't know if anyone is interested, but I ended up figuring out a solution on my own and I thought I would post it here.
The first script which I found online clears the inputs and select boxes, the 2nd one is provided by Allan to reset the filtering on the table, and the third one is just a little script to call the other two on click of the following:
Reset
which you can put somewhere above or below your table.
Thanks,
Bee
/* Clears the filtering inputs and selects */
$.fn.clearForm = function() {
return this.each(function() {
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form')
return $(':input',this).clearForm();
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = '';
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
else if (tag == 'select')
this.selectedIndex = -1;
});
};
/* Removes filters from the table data and restores all data */
$.fn.dataTableExt.oApi.fnFilterClear = function ( oSettings )
{
/* Remove global filter */
oSettings.oPreviousSearch.sSearch = "";
/* Remove the text of the global filter in the input boxes */
if ( typeof oSettings.aanFeatures.f != 'undefined' )
{
var n = oSettings.aanFeatures.f;
for ( var i=0, iLen=n.length ; i