Search input field - reset button

Christian Bonato

Hello Allan,


Congratulations for this excellent plug-in.

I'm implementing it in a simple messaging system,

allan

Hi Christian,

1. Clearing the end-user's search is simply a case of passing a blank string for the filter value. Perhaps something like $('.dataTables_filter input').val('').keyup(); if you want to do it in Javascript.

2. Your selector is incorrect - try $('.dataTables_filter input'). XRay is a good bookmarklet for testing selectors: http://www.westciv.com/xray/

Allan

Christian Bonato

Hi Allan,


— Resolved — (thanks to you !)

Thanks for pointing me to XRay, much easier to use than Firebug (I mean just to check dependencies. Firebug is a BIG swiss knife).

1. I had it nailed, passing a blank string worked. So I guess the way I wrote it was correct. By cleaner way I meant not adding extra lines to jquery.dataTables.min.js . But never mind, it works, I have to improve my js and jquery skills by myself anyway.


2. It was indeed incorrect. I saw the class name using CSSEdit, but it was like 5 in the morning, which also explain why I was trying :

.value('')

instead of :

.val('')

Doh !


Anyway, it works ! Like I said the only thing I don't get is why I am not able to declare this "reset" function in my end script. The only way I got it to work is by adding it in jquery.dataTables.min.js.
I feel guilty, I'm having the feeling I should keep your code untouched... :-)


If anybody is interested in a reset button for search, here's what I added in jquery.dataTables.min.js :

[code]
// ORIGINAL CODE, JUST TO SHOW YOU WHERE I ADD
nFilter.className="dataTables_filter";
// ----- EOF - ORIGINAL CODE, JUST TO SHOW YOU WHERE I ADD

// MY HACK
nFilter.innerHTML=oSettings.oLanguage.sSearch+'

allan

Hi Christian,

Excellent stuff - good to hear you got it working. Isn't mandatory donations then commercial software?! :-) But all donations are most welcome ;-)

Regarding the examples, with the update I'm working on for the 1.5 site there are a few more example and a bit better layout, which will hopefully help a bit. It's a fine balance to strike to promote learning (and not just giving away code), making it accessible to developers of all abilities (you are obviously most capable for example, while others might struggle with this) and showing off the abilities of DataTables. I think at the moment I have gone on the side of promoting learning by not giving too many, but showing enough for developers to get started.

One of the things I would like to do at some point is add a 'gallery' of DataTables installations which shows DataTables fully kited out with styles, plug-ins etc to give examples of what can be done, and also the ability to learn from that code. It's on the to do list...

Regards,
Allan

zoggy

Here is a slightly updated version of this code, and also uses the theme image to fit better I think.

Need to use jquery-ui css for the theme/image and css styles.
add this to your css so you can fix the alignment of the image.
[code].float-right { float: right; }[/code]

In the jquery.dataTables.js, in the function _fnFeatureHtmlFilter,

modify the line of code
[code]nFilter.innerHTML = oSettings.oLanguage.sSearch+sSpace+'';[/code]

to (this adds the x image to the right of search box)
[code]nFilter.innerHTML = oSettings.oLanguage.sSearch+sSpace+'';
[/code]

right above the last line in the function
[code]return nFilter;[/code]
add this block of code (this runs the commands when clicked to reset search box/results)
[code] $("input#resetsearch"+oSettings.sTableId, nFilter).click( function(e) {
_fnFilterComplete( oSettings, {"sSearch":''} );
jqFilter.val('');
} );
[/code]

--zog

zoggy

Here is an example of what it looks like (colors are a bit off as I am working in a remote terminal with 256 colors but you get the idea), http://img269.imageshack.us/img269/2305/searchrr.jpg

zoggy

final note, this does work fine with multiple tables, hence the oSettings.sTableID which keeps the names unique.

robbiesmith79

Zoggy's solution confirmed! Great work.

Christian Bonato

Thanks, guys.

Just a UI thought...

IMHO the icon should be an arrow shaped into a circle, like a reload thing :
http://www.mricons.com/store/png/13982_13976_128_reload_icon.png

The cross is commonly associated to a "close" action in the user's mind.

Christian

Xereu

Hey Zoggy, I'm using this solution to achieve an slightly different goal. In my case I'd like to pull a list of products that where register today, I tried writing a Date.getFullYear() right into the {"sSearch":''} but it didn't work, I also tried declaring a variable to have the current date in it and when I try to use it but somehow _fnEscapeRegex function doesn't let it through and when I use the Date() function directly it works fine but I need not only to format the Date() but also to take out some parameters as well, the raw date function brings this Tue Mar 22 2011 10:08:42 GMT-0400 (EHDT) and I just need something like 03-22-2011, is there a way to achieve this?

[code]
var d = new Date();
$("a#resetsearch"+oSettings.sTableId, nFilter).click( function(e) {

_fnFilterComplete( oSettings, {"sSearch":d.getFullYear()} );
jqFilter.val(d.getFullYear());
} );

[/code]

fusionzone

Not sure what version Zoggy's March 2010 post was for but I ended up using the following for version 1.8.1.

[code]
nFilter.innerHTML = ''+sSearchStr+' ';
[/code]

This uses the "x" on a circle background. I also added some margin for better vertical alignment and a title for description when hovering.

John Archer

It is good that you have found a solution, but editing the jquery.dataTables.js can't be a serious solution, I mean, with every new update of the library you lose your code. So, isn't there a better/official way for doing that?

Thanks!

Xereu

This solutions is not working for version 1.8, any updates?

allan

Just not just use standard DOM/jQuery methods to inject a button after the input once the table has been initialised (using fnInitComplete )?

Allan