title: display specific rows from a table using jquery
body: <p>I am trying to display a table with 100 rows and i want to show the first 20 rows and hide the others at first..and after that the next 20 rows until we reached 100 rows...I am new using jQuery so i don't know how to do it i have tried something like this but its definitely wrong</p>
  
  <blockquote>
    <p>PHP</p>
  </blockquote>
  
  <pre><code>&lt;?php 
   $sql = "SELECT *, ROW_NUMBER() OVER(ORDER BY jloc_title ASC) AS  Rownum,jloc_id, jloc_title 
  FROM Locations";
  $stmt = sqlsrv_query($connection,$sql);
  if($stmt == false)
  {
   echo"Error (sqlsrv_query):".print_r(sqlsrv_errors(),true);
   exit;
  }
  while($row1=sqlsrv_fetch_array($stmt))
      {
      $id = $row1[0];
      $title = $row1[1];
      $Rownumber = $row1[2];              
      echo"&lt;tr id='Row' value='".$Rownumber."'    &gt;";
      echo"&lt;td class='text-center'&gt; " .$Rownumber.  "&lt;/td&gt;";
      echo"&lt;td class='text-center'&gt; " .$id. "&lt;/td&gt;";
      echo"&lt;td class='text-center'&gt; " .$title. "&lt;/td&gt;";
      echo"&lt;/tr&gt;";
      }
  ?&gt;
  </code></pre>
  
  <blockquote>
    <p>jQuery</p>
  </blockquote>
  
  <pre><code>$(document).ready(function(){
  var number = document.getElementById("table1").rows.length ;
  var counter= 0 ;
  for (i=0; i&lt;=number; i+=20) {   
      if (counter == 0) { 
          if (number &gt; 20) {  
              var $rows = $("#table1 tr");
              $rows.eq(21).hide();
              ...
              $rows.eq(100).hide();
          }
          counter++;
      }
      else if (counter == 1) {
          while (counter == 1 ) {
              if (number &gt; 40 ) {
                  var $rows = $("#table1 tr");
                  $rows.eq(0).hide();
                  ...
                  $rows.eq(21).hide();
                  $rows.eq(60).hide();
                  ...
                  $rows.eq(100).hide();                                   
              }
              counter++;
          }
      } else {
          ...
      }
  
      setInterval(function(){location.reload();}, 1000*10);
  }
  });
  </code></pre>