Reset/Clear Search Button

Hi,

thanks for your post, and sorry for the trouble.

A quick solution might be this: Please try adding this code to the “Custom Commands” textfield on the “Edit” screen of the table:

"fnInitComplete": function(oSettings, json) { $( '.dataTables_filter input' ).attr( 'type', 'search' ); }

That will turn the search field into an actual “Search” field, which will have a small “x” button inside it, once a user has typed something in, and clicking that will reset the field.
We will see this more and more in the future, as that’s part of the HTML5 standard.

Regards,
Tobias

Hi Tobias,

Thank you for getting back to me. I added the Custom Command and the x button appears in HTML5 supported browsers. However, my goal is to reset the table so that after a search is cleared the table reverts to the regular data cells. Right now if you use the search and clear it, then the table keeps whatever came up from the search. Do you know if it’s possible to have this x button reset the table data too?

Also, is there a way to move the Drop Down menu from the Column Filter Widget plugins to the same line as the Search and Entries bars? Ideally I’d like to have the Drop Down menu for “Location” after the Search bar.

Thank you again for helping me so far, much appreciated. Let me know if you can think of any workarounds for these issues.

Best,

Daniel

Hi Daniel,

ah, bummer. You are right, this does only empty the search field, but it does not reset the filtering…

You might then have to use some custom JavaScript (similar to some of what is those links that you posted) on the page directly, i.e. in <script> tags that you paste below the [table] Shortcode.
(If you are interested in my personal opinion: I’m not sure if users aren’t smart enough to recognize that manually clearing the “Search” field will get them back to the full table. So, I wouldn’t put too much energy into finding a solution here.)

Regarding the position of the Column Filter Widgets: Due to how that is added to the “DOM” in the browser, you would need some rather sophisticated CSS to reposition those drop downs (which I don’t have readily available). You would most likely also run into issues with things sudddenly shifting on the page, when a user selects something from the dropdown, which again can look ugly).

Regards,
Tobias

Hi Tobias,

Thank you for the quick reply.

I see that this person accomplished a reset of the filtering with a search clear button. That’s exactly what I’m looking for. However I haven’t figured out how to implement their code.

And if I can’t move the Column Filter Widgets (and I now see the potential problems when users start making selections) is there a way to move my hyperlink “Reset” next to the Search button? So far I’ve just included a hyperlink before inserting the Table Shortcode.

Thank you again for taking a look at all this.

Best,

Daniel

Hi Daniel,

well, the “person” in that link just happens to be lucky: He’ already using a newer version of the DataTables JS library than the version that comes with TablePress. There’s however no direct code that we could copy here ??
(I’m planning to integrate that new version of DataTables in the next version of TablePress though. This will take a couple more weeks though. Meanwhile, you could try to replace the JS file in TablePress with that from the DataTables website — or just wait until this feature becomes part of the plugin.)

Moving the “Reset” link next to the “Search” field suffers from the same problems as would moving the ColumnFilterWidgets dropdowns: It’s a different HTML element that simply is located in a different position in the DOM on the page ??

Regards,
Tobias

Thanks for the response Tobias. I think I’ll wait until you’ve integrated the new version of DataTables and hope that fixes it. I really appreciate all the work you’re doing with this plugin.

Best,

Daniel

Hi Daniel,

yes, that’s probably going to be the easiest way here, and it would save you some work.

Regards,
Tobias