Multiple re-search on WordPress table reloaded plugin

Introduction

If you use WP-table-reloaded plugin, you know that you can insert multiple tables on the same WordPress post, but you can search inside only one table at a time. This article explains how to enable multiple table search. You have to know what WordPress is, and you have to use WP-table-realoded plug-in, a must have plug-in IMHO. This article uses jQuery and DataTables JS Library, if you want you can learn them here: jQuery - DataTable

Using the code

You have to insert this code:

<script type="text/javascript">

inside the header.php file of your current WordPress theme. The code is composed of two parts: the function myFilter is executed when the button is clicked; so the value of the input is retrieved and passed to the right JS DataTables object.

function myFilter(){
    theval = jQuery('#maininput').val();

    oTable3 = jQuery('#wp-table-reloaded-id-3-no-1')
        .dataTable();
    oTable4 = jQuery('#wp-table-reloaded-id-4-no-1')
        .dataTable();

    oTable3.fnFilter(theval);
    oTable4.fnFilter(theval);
}

jQuery(document).ready(function() {
  jQuery('div.PostContent')
    .before('<h3>SEARCH TEST:</h3><p>
      <input id="maininput" type="text">
      <input type="button" id="btnSearch"  önClick="myFilter();"
      value="SEARCH" /></p><br />');
});

Points of Interest

• First of all, please note that "#wp-table-reloaded-id-3-no-1" is the CSS ID of the table generated by the plug-in (and also the other one, of course).
• I'm using the jQuery operator instead of "$" standard operator to avoid interference with other JavaScript libraries.
• The whole HTML is inserted in the Post with JavaScript, so you'll find this search field in EVERY post of your site, if you want to embed only in some posts you have to modify jQuery('div.PostContent').before... with the correct selection of DOM node where to insert the HTML generated.