Question

我试图通过“下一个”和“上一个”按钮进行导航，每当我按下“下一步”时，下一个表行就会出现，如果按“上一步”，则会显示前两行，但它有一个错误。页面加载后第一次显示所有表格行，如何限制它在页面加载时只显示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();

这应该隐藏第三个表格的行。

Answer 2

尝试在页面加载中隐藏不必要的行..

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

为什么要显示所有表格行？

2 个答案: