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 Facebook, Twitter, Tumblr.

Comments

Post a Comment

Popular posts from this blog

Calculate Your CTC Salary Hike Percentage - Online Calculator to find your New Salary

-
Image
  Did you receive a Salary Hike? Congratulations!  Using this CTC Hike Percentage calculator you can calculate: Percentage Hike Received New Expected Salary Old Salary (yes, you already know it! But if you want to compare, we've included that feature as well!) Receiving a Salary Hike is a really happy occasion. It means that your work is valued in your organization and the organization is willing to invest in you and your career growth. But as any human being, you are interested in exactly how much you have received. Most organizations provide either a lump sum amount in the hike letter or mention a percentage. Employees are left wondering that if I have received a certain amount of hike, what exactly is the percentage when compared to my old or previous salary. In the same way, if percentage is mentioned, then the employee is left wondering what will be my new salary.  So, we have a very simple solution for y...
Read more

Find the Longest Streak of 1's in a Binary Array using Java Code

-
Image
  You have been given an Integer Array which contains only 1s and 0s, and asked to find the longest running streak of 0 or 1 in the array. Sound familiar? Its a common interview question. Let's try to find a solution using Java.  We would required two counters here, 1 counter to keep track of the running count, and the second one to keep track of the maximum running streak found.  We'll loop through the array using a for loop.  Here is the code for your reference: /**  * Find the longest Streak of 1s  * @author computengine.com  * @param a  * @return the length of the longest streak  */ public int findLongestStreak ( int [ ] b ) { System . out . println ( " Array for processing: " + Arrays . toString ( b ) ) ; int count = 0 , max = 0 ; //loop through the array for ( int i = 0 ; i < b . length ; i + + ) { //increment count when 1 is found if ( b [ i ] = = 1 ) count + = 1 ; //if count is greater...
Read more

Java Program to read Excel File and Load into Array

-
Image
Excel is one of the most important productivity tools used in offices. It is also a great organizational tool, and its really easy to create tables in excel to store different kinds of data.  When doing automation, excel is an important tool to store data for automation scripts, which makes reading Excel data using Java code an important Interview Question. So, today we'll learn how to read an excel sheet using Java, and return the contents as a String Array. The Array can then be utilized as per your requirement.  We are reading an xlsx file, the most recent and most popular excel format. We need to import the below classes: import java . io . File ; import java . io . FileInputStream ; import org . apache . poi . xssf . usermodel . XSSFCell ; import org . apache . poi . xssf . usermodel . XSSFRow ; import org . apache . poi . xssf . usermodel . XSSFSheet ; import org . apache . poi . xssf . usermodel . XSSFWorkbook ; java.io.File and java.io.FileInputStream will ...
Read more

Java Program to Read a Properties file and return a Property Value

-
Image
  Properties file in Java is used to store configurations, data or settings for a project. They have been utilized as Object Repositories for Automation Projects in the past (and still are used in legacy projects) until the Page Object Model came along.  This makes reading of Properties files an important concept in Java. This Tutorial will cover the below topics: 1. Create  Properties file in a Java Project 2. Set Properties in the file 3. Read the Properties file using Java code and return the value Let's first see how to create a Properties file for your Project. Its really easy.  In Eclipse, right click on the folder where you want to create the file, and navigate to New -> File. Now enter the file name, and make sure to enter the extension as .properties The file has been created! Now, the next step, i.e. enter some data in the file that we'll read using Java. The properties stored in the properties file have to follow a certain format.  You can enter l...
Read more

4 ways to add New Line Character to a String in Java

-
Image
When you are required to output Strings with your Java code, more often than not, there is a requirement to format the output correctly.  Adding a newline character between two strings in order to separate them, or create a paragraph is one of the most common requirements. Let's look at a few ways today, on how to output a newline between two Strings. 1. System.out.println inbuilt function One of the easiest ways, is to use the function System.out.println(). The println() function will automatically add a new line to the output, if using two strings.  Sample: String s1 = "This is a String." ; String s2 = "This is another String." ; System . out . println ( s1 ) ; System . out . println ( s2 ) ; If you don't want to use a separate System.out.println for every String, there are other ways as well. Read on! 2. Add a newline character "\n" You can simply append newline character yourself to the strings, and use a single System.out.print command...
Read more