javascript - 为什么显示所有表格行？

Question

我正在尝试通过 Next 和 Previous 按钮进行导航，每当我按下 Next 时，接下来的 2 行表格应该出现，如果我按下 Previous，前 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 表行。