Hide table AFTER search

Resolved archesis
(@anchises)

10 years, 6 months ago

Thanks for this awesome plugin. I am testing it right now and I would like to know, if there is a way to hide the table AFTER a search.

What I have so far done is:

1) On loading the page only the search field is displayed.
2) The search result only shows up after pressing “enter”.
3) Only the first row is searched.

However, when I use the backspace or delete button AFTER the initial search, the rest of the table shows up, according to whats in the search field.

Is there a way to hide the table?

Perhaps something like: “If you press backspace or delete button or ctrl + x in the search field, then hide table”

Thx in advance!

https://wordpress.org/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Tobias Bäthge
(@tobiasbg)

10 years, 6 months ago

Hi,

thanks for your post, and sorry for the trouble.

You’d probably need to add a check in your JS code for whether the content of the search field is empty, similar to how the Inverted Filter Extension from https://wordpress.org/support/topic/i-want-the-table-to-be-invisible-until-filter-is-applied?replies=4 does it.

Regards,
Tobias

Thread Starter archesis
(@anchises)

10 years, 6 months ago

Thanks for the quick reply, I already worked that out.

See my test-page:
http://www.pfarre-mn.at/overview/coupon-abfrage

If you enter e.g. “3023” then a search result shows up. When I remove the last digit, the other contents of the table, starting with “302” are displayed, which I would like to prevent.

So basically I want to add:
If key 8 (backspace) or 46 (delete) is pressed, then hide table/dont show search result.

However I fear my JS-knowledge is just not good enough to accomplish that 😉
Plugin Author Tobias Bäthge
(@tobiasbg)

10 years, 6 months ago
Hi,

you could maybe try
```
if ( 13 == e.keyCode ) {
	$( '.dataTables_wrapper' ).find( '.tablepress' ).toggle( '' != $(this).val() );
} else {
	$( '.dataTables_wrapper' ).find( '.tablepress' ).hide();
}
```
Regards,
Tobias
Thread Starter archesis
(@anchises)

10 years, 6 months ago
This works and its nice and simple. A donation will come your way.

Just for documentation sake, if somebody else needs this:

## What does it do? ##
Show the table only if something is entered in the search box and after the Enter-key is pressed. Hide the table if any other button is pressed.

## How-to? ##
1) Download and activate the Plugin “tablepress-datatables-inverted-filter” here: https://tablepress.org/extensions/datatables-inverted-filter/

2) Open the Plugin’s PHP-File with a text-editor and replace the “page-slug-1” with the slug(s) of your page (last part of URL).

3) Change the code starting with line 43

Old:
```
$( '.dataTables_filter' ).find( 'input' ).on( 'keyup', function() {
	$( '.dataTables_wrapper' ).find( '.tablepress' ).toggle( '' !== $( this ).val() );
} ).keyup();
JS;
```
New:
```
$( '.dataTables_filter' ).find( 'input' ).on( 'keyup', function(e) {
	if ( 13 == e.keyCode ) {
	$( '.dataTables_wrapper' ).find( '.tablepress' ).toggle( '' != $(this).val() );
} else {
	$( '.dataTables_wrapper' ).find( '.tablepress' ).hide();
}
} );
$( '.dataTables_wrapper' ).find( '.tablepress' ).hide();
JS;
```
4) Save the file, upload it, overwrite the old one

References:
https://wordpress.org/support/topic/how-to-not-show-the-result-of-the-search-query-until-enter-key-is-pressed

https://wordpress.org/support/topic/i-want-the-table-to-be-invisible-until-filter-is-applied
Plugin Author Tobias Bäthge
(@tobiasbg)

10 years, 6 months ago

Hi,

no problem, you are very welcome! 🙂 Good to hear that this helped!

And thanks for wanting to donate and for this summary of steps! I really appreciate it!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Hide table AFTER search’ is closed to new replies.

Tags