Reduce Server Load from Dynamic Page Search - Create a Dynamic JavaScript based Table filter

 



When we are building a website, and need to create a searchable list of web pages, performance is one of the key concerns. Frequent searches can put unnecessary load on the server. In this case, there is a cool alternate approach where you load the search page only once, and the search itself is done using Javascript!

What is needed for this implementation? Not much, and we'll walk you through it!

We will also have the flexibility to Search on different columns of a table. 

First, let's create a table. 

<table id="list_table" style="border-collapse: separate; border-spacing: 10px;">
  <tbody>
    <tr>
      <th style="text-align: left;">SNo</th>
      <th style="text-align: left;">Tool Name</th>
      <th style="text-align: left;">Type Tags</th>
    </tr>
    <tr>
      <td style="text-align: left;">1</td>
      <td style="text-align: left;"><a href="http://www.computengine.com/2021/07/converter-tools-convert-weight-length.html" target="_blank">Converter Tools</a></td>
      <td style="text-align: left;">Converter, Weight, Length, Temperature, Speed</td>
    </tr>
    <tr>
      <td style="text-align: left;">2</td>
      <td style="text-align: left;"><a href="http://www.computengine.com/2021/07/roots-and-logs.html" target="_blank">Roots and Logs</a></td>
      <td style="text-align: left;">Square, Cube, Square Root, Cube Root, Log, Log2, Log10</td>
    </tr><tr>  
  </tr></tbody>
</table>

You can add as many rows as required, or the original table can be dynamically generated as well from the database. The Javascript will work on the table that is finally displayed to the user. The table we are using looks like this.

SNo Tool Name Type Tags
1 Converter Tools Converter, Weight, Length, Temperature, Speed
2 Roots and Logs Square, Cube, Square Root, Cube Root, Log, Log2, Log10

Next step is to create a Form which will help us in the search. Here's a sample.

<!--Filter form-->
<form id="search_form" onsubmit="return false">
  <h3>Search List of Tools</h3>
  <input checked="" id="radio_1" name="rad" type="radio" value="1" />
  <label>By Name</label>
  <input id="radio_2" name="rad" type="radio" value="2" />
  <label>By Type</label>
  <br /><br />
  <label>Search String:
	<input id="search_input" type="text" />
  </label>
  <br /><br />
  <button onclick="calc_filter(document.getElementById('search_input'),document.getElementById('list_table'),search_form.rad.value)" type="submit"><b>Search</b></button>&nbsp;
  <button onclick="document.location.reload()" type="reset"><b>Reset</b></button>  
</form>


This is what we get. 

Search List of Tools





 


Now, notice that in the button HTML, we are calling a Javascript function for filtering and passing the IDs of the Search Input field, the Table, and the Radio button selection. 

If you are modifying these IDs or adding more Radio buttons in the search, you need to modify the values being passed.

Now comes, the most important part of the tutorial, the actual Javascript code that is going to make the search happen!

Here it is :

/**
 * Common function to create a JS based filter on a table of values.
 * @author computengine.com
 * @param {*} input_id is the id of the input form
 * @param {*} table_id is the id of the table which contains the data
 * @param {*} table_col is the column number on which we'll run the search. We derive this value using the radio button value field.
 */
function calc_filter(input_id,table_id,table_col) {
  var filter, tr, td, i;
  filter = input_id.value.toUpperCase();
  tr = table_id.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[table_col];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

Just include the function in the search page where you have created the form as well as the table. As its a javascript function, make sure you include it into the <script>--put the function here--</script> tags.

Another way is to include the function into the common js file that you might be loading for your website. 

And that's it! You have successfully implemented a Search functionality using pure HTML and Javascript, and save up on the Server processing required. Congratulations!

The final result looks like --> Tools You Can Use.

Thanks for Reading the Article. If you have reached this far, we hope that the article was useful to you! Please Like/Share/Follow us on FacebookTwitterTumblr.

Comments

Popular posts from this blog

Calculate Your CTC Hike Percentage

Java Program to Find a List of Prime Numbers (Step by Step)

Java Program to check Palindrome

What is my IP Address - How to find your IP address on Local Network using Command Prompt, and External Network using JavaScript Code