Hi,
thanks for your post, and sorry for the trouble.
From what I understand, you want this: https://ww.wp.xz.cn/support/topic/i-want-the-table-to-be-invisible-until-filter-is-applied/#post-4272342
Regards,
Tobias
Thank you much for your answer.
Yes, this ist basically what i want.
I have test this plugin and adapt the php.
In my case this search field should be on the most or every of the posts instead of single pages.
This works.
But there are other Tablepress Tables.
And they are now even affected by the plugin.
This search field should only work in the section with id=”tablepress-search”.
But unfortunately this specific part dont work.
Here is my code:
if ( ! is_single( array() ) ) {
return $commands;
}
$commands = <<<JS
$.fn.dataTableExt.afnFiltering.push(
function( settings, data, dataIndex ) {
return '' !== settings.oPreviousSearch.sSearch;
}
);
{$commands}
$( '#tablepress-search .dataTables_filter' ).find( '#tablepress-search input' ).on( 'keyup', function() {
$( '#tablepress-search .dataTables_wrapper' ).find( '#tablepress-search .tablepress' ).toggle( '' !== $( this ).val() );
} ).keyup();
JS;
return $commands;
}
Hi,
I’m afraid that this is the drawback of the Extension 🙁
Due to how it works technically, it will affect the search of all tables on that page.
Unfortunately, I’m not aware of a way to work around that, sorry.
Regards,
Tobias
thank for your help.
i think i build a work around with jQuery. I think i could use this to add a value in the specific field. Fortunately it all depends on a value in the search field.
best regards
norman
Hi Norman,
yes, that’s something that you could try. I hope that you can find a solution.
Best wishes,
Tobias
Good morning, now it works!
I wrote first the jQuery and it works only on a normal input type search.
But the tablepress was first immune against this jQuery manipulation.
In combination with a short set timeout it works.
500ms is okay, i put this all in a css animation and fade the search form in.
Here is the working code:
Tablepress in the template
<section id="tablepress-search" class="window table">
<?php tablepress_print_table( array(
'datatables_locale' => 'de_DE',
'id' => 'html',
'datatables_row_details' => true,
'datatables_row_details_columns' => '2,3,4',
'use_datatables' => true,
'show_rows' => '10',
'row_order' => 'sort',
'row_order_sort_column' => 'B',
'row_order_sort_direction' => 'ASC',
'datatables_paginate' => true,
'print_name' => false ) ); ?>
</section>
Enque the script in the single.php
<?php wp_enqueue_script( 'script9', get_template_directory_uri() . '/tutorials/js/placeholder-search.js', array ( 'jquery' ), 2.1, true); ?>
The jQuery Script
jQuery(document).ready(function() {
setTimeout(function(){
jQuery("#tablepress-search input[type=search]").val("Hilfe");
}, 500);
});
Okay, this solution is better.
Adding a value with timeout kill the important initial ajax refresh.
Without this, the value in the search field does not do the job correct.
First i give in CSS this .tablepress display: none.
The Search Field is visible. The Table is hidden.
When in the search field a Keydown event, then change the css property display: none in display: table.
jQuery(document).ready(function() {
setTimeout(function(){
jQuery("#tablepress-search input[type=search]").val("Hilfe");
jQuery('#tablepress-search input[type=search]').bind("keydown", function(e) {
jQuery('.body-container .tablepress').css( "display", "table" );
});
}, 250);
});
Hi,
good to hear that you found a solution, thanks for sharing it!
Best wishes,
Tobias
