External custom filtering for advanced users

Tabulizer offers lots of options when it comes to filtering table data. But what if you want to build your own filtering box that sits outside of the table? This article discusses a method to filter the table data using your own customized filtering process. The filters can be anywhere on the page, while the filtering logic is up to you how to implement it.

Some working knowledge of PHP programming and Javascript coding is assumed. We will present the key points of this approach along with the full code of how to do it. At the end it should looking like the table below:

Author
Year of Publication
Invalid data source. Please correct the following errors:
  • The data source tag/idis missing or it is invalid

Step 1: Create the modification function that will filter the table data

A modification function is basically a PHP function that takes as input one version of the table data and returns a modified version of them. In our case, this is the place where we will read the filter values and filter out any rows that do not match the search criteria. In this example we are reading the author and year of publication filter values, when present that remove accordingly any row that does not match the search criteria.

Step 2: Create the ruleset that will call this modification function

The ruleset will be responsible for calling this modification function, include required javascript files and any other rule you wish to apply.

Step 3: Create the data source that will read ALL the data and use the ruleset you created in step #2

By "all" data we mean all the data without any filtering applied to them. This is the most generic case and assume no control over them.

Step 4: Insert the data source into the page, along with the HTML code for the search box

For this step you will need to create one of more javascript functions that will load via an Ajax call the contents of the data source you created in step #1 and refresh the HTML element that contains the table data. This javascript code should be placed into a javascript file that will be included by the ruleset you created in step #2.

Here is the HTML source code used in this article:

<div class="filter_params"><form id="form_filter">
<table class="filter_table">
<tbody>
<tr>
<td>Author</td>
<td><input id="filter_author" name="filter_author" type="input" value="" /></td>
</tr>
<tr>
<td>Year of Publication</td>
<td><input id="filter_year_of_publication" name="filter_year_of_publication" type="input" value="" /></td>
</tr>
<tr>
<td> </td>
<td><input type="button" value="Filter" onclick="requestFilteredData();" /> <input type="button" value="Clear" onclick="requestAllData();" /></td>
</tr>
</tbody>
</table>
</form></div>
<div id="filtered_table_content" class="filtered_content">here goes the data source directive inserted by the editor's Data Source(s) button</div>

What is the URL of the Ajax call that will read the contents of the data source?
It depends on your CMS.
For Joomla use:
{joomla root URL}/index.php?option=com_tabulizer&task=outputDataSource&ds_tag=hybcoK2ubxZG8pmLfg7p6m0n
For Wordpress use:
{wordpress root URL}/wp-content/plugins/tabulizer/site/tabulizer.php?task=outputDataSource&ds_tag=hybcoK2ubxZG8pmLfg7p6m0n
Replace hybcoK2ubxZG8pmLfg7p6m0n with the actual data source tag you are using.