title: How to refresh the table to initial state for new search in jquery?
body: <p>I have a search box which will search in the table and display the table row. But when i want to clear the search box and try to search new data, the table does not refresh the previous search therefore, can not find the result for new data.
  Therefore, when i search for new data, the table should refresh to initial state and search the new data in the same table.</p>
  <p>Thanks in advance.</p>
  <p>HTML code :</p>
  <pre><code>&lt;div  class=&quot;inventory&quot; &gt;&lt;span class=&quot;hdr&quot;&gt;inventory-1&lt;/span&gt;
  &lt;input type=&quot;text&quot; placeholder=&quot;Search&quot; class=&quot;searchrequest&quot; id=&quot;s1&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;gcontain&quot; id=&quot;g1&quot; &gt;
  &lt;ul class=&quot;tablist&quot;&gt;
   &lt;li&gt;&lt;a href=&quot;#g11&quot;&gt;tab1&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class=&quot;tab_container&quot;&gt;
  &lt;div id=&quot;g11&quot; class=&quot;tab&quot;&gt;
  &lt;table class=&quot;data&quot; id=&quot;data&quot;&gt;
  &lt;thead&gt;
  &lt;tr id=&quot;head&quot;&gt;&lt;th&gt;SL.No&lt;/th&gt;&lt;th&gt;Column2&lt;/th&gt;&lt;th&gt;Column3&lt;/th&gt;&lt;th&gt;Column4&lt;/th&gt;&lt;th&gt;Column5&lt;/th&gt; 
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody id=&quot;tabledata&quot; class=&quot;tabledata&quot;&gt;
   &lt;tr&gt; &lt;td&gt;1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;4&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;4&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;td&gt;Row 4&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt; &lt;td&gt;3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
   &lt;/tbody&gt;
   &lt;tfoot id=&quot;footer&quot; class=&quot;footer&quot;&gt;
   &lt;tr&gt;
   &lt;td colspan=&quot;5&quot;&gt;&lt;span id=&quot;totentry&quot;&gt;Total Entry :&lt;/span&gt;&lt;span id=&quot;total&quot; class=&quot;total&quot;&gt; 
   &lt;/span&gt;&lt;span id=&quot;nav&quot; class=&quot;nav&quot;&gt;&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tfoot&gt;
   &lt;/table&gt;
     &lt;/div&gt;
  </code></pre>
  <p>jquery code :</p>
  <pre><code>    $(&quot;.searchrequest&quot;).on(&quot;keyup&quot;, function() {
      
      var find_table = $(this).closest('.inventory').next('.gcontain').find('.tab_container').find('.tab .activateTable');
      var active_table_row = find_table.find('.tabledata tr');
      
                       find_table.find('.tabledata tr').remove(); 
                       find_table.find('.footer .total').hide(); 
                       find_table.find('.footer .nav').empty(); 
      var value = $(this).val().toLowerCase();
      
      var resultCount = 0;
      
      active_table_row.each(function() {
       if ($(this).text().toLowerCase().indexOf(value) != -1) {
              resultCount++;
              }
       });
      
      find_table.find('.footer .total').html(resultCount).show(); 
      
      var search_rowsShown = 5;
      var Search_numPages = resultCount/search_rowsShown;
      
      
      
      var search_result = active_table_row.filter(function() {
      
               if ($(this).text().toLowerCase().indexOf(value) &gt; -1) {
                      return $(this);
                   }
               });
    
      search_result.hide();
      search_result.slice(0,search_rowsShown).show();
      find_table.find('.tabledata').append(search_result);
      
      
       for(j = 0;j &lt; Search_numPages;j++) {
          var Search_pageNum = j + 1;
              find_table.find('.footer .nav').append('&lt;a href=&quot;#&quot; class=&quot;pagination&quot; rel=&quot;' + j + '&quot;&gt;'+Search_pageNum+'&lt;/a&gt; ');                         
          }
      
      $(find_table.find('.footer .nav a')).click(function(){
          
          var search_currPage = $(this).attr('rel');
          var search_startItem = search_currPage * search_rowsShown;
          var search_endItem = search_startItem + search_rowsShown;
          
          find_table.find('.tabledata tr').hide().slice(search_startItem, search_endItem).css('display','table-row').animate({opacity:1}, 300);
              
          });
  
      });
  </code></pre>