Click here to Skip to main content
Click here to Skip to main content

Multiple re-search on WordPress table reloaded plugin

, 17 Dec 2011
Rate this:
Please Sign up or sign in to vote.
This tip explains how to enable multiple table searches

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

taloweb
Web Developer TaloWeb
Italy Italy
Web developer – Information services – translator
 
Title of Study: degree in computer science
 
Area of Expertise: Web programming in ASP.NET (C# and VB.NET)
 
Good Skills: indows Server 2003/2008, Active Directory, Security, Firewall (Watchguard), VPN, DataBase Management (SQL Server 2k/2005, OODBMS), Object Orientation, ASP, ASP.NET, Ajax, C#, XML;
 
Some knowledge: PHP, VBSCRIPT, MySql, PhpMyAdmin, Hosting management, DNS, VB.NET, Mdaemon mail server, Video Surveillance, WordPress, Graphic Design;
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 17 Dec 2011
Article Copyright 2011 by taloweb
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid