Почему отображается вся строка таблицы?

Question

Я пытаюсь перейти через кнопки «Далее» и «Предыдущий», всякий раз, когда я нажимаю «Далее», должны появляться следующие две строки таблицы, и если я нажму «Предыдущий», появятся предыдущие 2 строки, но у него есть ошибка. После загрузки страницы в первый раз, когда она показывает всю строку таблицы, как я могу ограничить ее отображением только 2 строки на загрузке страницы?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">      </script> 
<script type='text/javascript'>//<![CDATA[ 

    $(document).ready(function() { 
     // number of records per page 
     var pageSize = 2; 
     // reset current page counter on load 
     $("#hdnActivePage").val(1); 
     // calculate number of pages 
     var numberOfPages = $('table tbody tr').length/pageSize; 
     numberOfPages = numberOfPages.toFixed(); 
     //hide previous button on load 
     if ($("#hdnActivePage").val() == "1") { 
      $("a.previous").hide(); 
      $("span").hide(); 
     } 
     // action on 'next' click 
     $("a.next").on('click', function() { 
      // show only the necessary rows based upon activePage and Pagesize 
      $("table tbody tr:nth-child(-n+" + (($("#hdnActivePage").val() * pageSize) + pageSize) + ")").show(); 
      $("table tbody tr:nth-child(-n+" + $("#hdnActivePage").val() * pageSize + ")").hide(); 
      var currentPage = Number($("#hdnActivePage").val()); 
      // update activepage 
      $("#hdnActivePage").val(Number($("#hdnActivePage").val()) + 1); 
      // check if previous page button is necessary (not on first page) 
      if ($("#hdnActivePage").val() != "1") { 
       $("a.previous").show(); 
       $("span").show(); 
      } 
      // check if next page button is necessary (not on last page) 
      if ($("#hdnActivePage").val() == numberOfPages) { 
       $("a.next").hide(); 
       $("span").hide(); 
      } 
     }); 
     // action on 'previous' click 
     $("a.previous").on('click', function() { 
      var currentPage = Number($("#hdnActivePage").val()); 
      $("#hdnActivePage").val(currentPage - 1); 
      // first hide all rows 
      $("table tbody tr").hide(); 
      // and only turn on visibility on necessary rows 
      $("table tbody tr:nth-child(-n+" + ($("#hdnActivePage").val() * pageSize) + ")").show(); 
      $("table tbody tr:nth-child(-n+" + (($("#hdnActivePage").val() * pageSize) - pageSize) + ")").hide(); 
      // check if previous button is necessary (not on first page) 
      if ($("#hdnActivePage").val() == "1") { 
       $("a.previous").hide(); 
       $("span").hide(); 
      } 
      // check if next button is necessary (not on last page) 
      if ($("#hdnActivePage").val() < numberOfPages) { 
       $("a.next").show(); 
       $("span").show(); 
      } 
      if ($("#hdnActivePage").val() == 1) { 
       $("span").hide(); 
      } 
     }); 
    });  
//]]> 

</script> 

Answer 1

Внутри вашей логики инициализации, после строки:

numberOfPages = numberOfPages.toFixed(); 

добавить:

$("table tbody tr:nth-child(n+3)").hide(); 

Это должно скрыть 3-й строки таблицы и далее.

Answer 2

попытайтесь скрыть ненужные строки в вашей загрузки страницы ..

$(document).ready(function(){ 
    ... 
    //hide the unnecessary rows here 
    ... 
});