Support » Plugin: TablePress » Set value for table search field

  • Resolved herrseeliger

    (@herrseeliger)


    Hi Tobias,

    thank you for your great work and support.

    I want use a tablepress as a search-database.
    It is placed in a template and on the same post there will be other tablepress.

    The Results of this search should be visible after a correct match.
    Without correct match, no results. (i will use a different language – json for the search table. So the “no correct match …” will also be hidden)

    I think a simple way to do this, is to set a value for the search field.
    A test in Chrome Inspector give me this result.

    Is there a possible way with the plugin?

    Best regards

    Norman Seeliger

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    From what I understand, you want this: https://wordpress.org/support/topic/i-want-the-table-to-be-invisible-until-filter-is-applied/#post-4272342

    Regards,
    Tobias

    Thread Starter herrseeliger

    (@herrseeliger)

    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;
    }
    
    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter herrseeliger

    (@herrseeliger)

    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

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Norman,

    yes, that’s something that you could try. I hope that you can find a solution.

    Best wishes,
    Tobias

    Thread Starter herrseeliger

    (@herrseeliger)

    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);
    
    });
    
    Thread Starter herrseeliger

    (@herrseeliger)

    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);
    
    });
    
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    good to hear that you found a solution, thanks for sharing it!

    Best wishes,
    Tobias

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Set value for table search field’ is closed to new replies.