jquery - 如何在每个页面中对具体内容进行描述分页？

Question

我总共有 4 行，每行分为 3 列，如下所示，

<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
<div class="col-sm-4">
<img src="img/portfolio/sd.png" alt="portfolio" />
</div>
</div>
</div>

这里我需要做分页，在第一页应该显示两行，在下一页需要显示两行..这里我使用了 bootstrap 分页，

 <ul class="pagination">
    <li><a href="" rel="prev">Prev</a></li>
    <li><a href="">1</a></li>
    <li class="active"><a href="">2</a></li>
    <li><a href="" rel="next">Next</a></li>
  </ul>

但我认为它只是为了设计..如何通过单击相应的页码来制作功能来获取内容..我不知道与之相关的任何想法任何好的帮助都会对我有所帮助..

Answer 1

And what should be done if the pages get more than 2?

答案已更新

根据评论，新代码可以处理可变数量的页面。将页面大小定义为分页元素的属性就足够了。

在下面的代码中带有所有 self 解释的注释:

$(function () {
    //
    //  get num of rows and compute num of pages
    //
    var nRows = $('.container .row').length;
    var nPages = Math.ceil(nRows / $('.pagination').data('page-size'));
    //
    // save num pages as a data attribute of pagination element
    //
    $('.pagination').data('num-pages', nPages);
    //
    // Create the buttons on the fly
    //
    for(var i=1; i<nPages; i++) {
        $('<li/>').append($('<a/>', {href: "#", text: i + 1})).insertBefore('.pagination li:has([rel]):last');
    }
    //
    // handle pagination
    //
    $('.pagination li').on('click', function (e) {
        //
        // prevent default action
        //
        e.preventDefault();

        //
        // The clicked element is the next one......
        //
        var eleClicked = $(this);
        var nextEle = eleClicked;

        //
        // ....if the clicked element is Next or Prev buttons
        //
        var nextPrevAnchorEle = eleClicked.find('a[rel]');
        if (nextPrevAnchorEle.length == 1) {
            //
            // compute the next element
            //
            if (nextPrevAnchorEle.text().trim() == 'Next') {
                nextEle = $('.pagination li.active').next('li:not(:has([rel]))');
                if (nextEle.length == 0) {
                    nextEle = $('.pagination li:not(:has([rel])):first');
                }
            } else {
                nextEle = $('.pagination li.active').prev('li:not(:has([rel]))');
                if (nextEle.length == 0) {
                    nextEle = $('.pagination li:not(:has([rel])):last');
                }
            }
        }
        //
        // toggle active page
        //
        $('.pagination li.active').removeClass('active');
        nextEle.addClass('active');

        //
        // get the number of active page
        //
        var currentPageNumber = +nextEle.find('a').text().trim() - 1;

        //
        // get the page size
        //
        var pageSize = +$('.pagination').data('page-size');
        //
        // toggle visibility
        //
        $('.container .row:visible').toggle(false);
        $('.container .row').slice(currentPageNumber * pageSize, (currentPageNumber + 1) * pageSize).toggle(true);
    });
    //
    // show the active page
    //
    $('.pagination li.active a').trigger('click');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- Init your HTML with a pagination containing only Prev, Next and first page and set active to the first page -->
<ul class="pagination" data-page-size="2">
    <li><a href="" rel="prev">Prev</a></li>
    <li class="active"><a href="">1</a></li>
    <li><a href="" rel="next">Next</a></li>
</ul>
<!--  Add as many rows as needed  in the container -->
<div class="container">
    <div class="row">
        <div class="col-sm-4">1
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">1
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">1
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">2
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">2
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">2
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">3
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">3
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">3
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">4
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">4
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">4
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">5
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">5
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">5
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">6
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">6
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">6
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">7
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">7
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">7
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">8
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">8
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">8
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">9
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">9
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
        <div class="col-sm-4">9
            <img src="img/portfolio/sd.png" alt="portfolio"/>
        </div>
    </div>
</div>

How to make functionality to get contents by clicking the corresponding page number

我假设您想实现分页功能:移动下一页，移动上一页，选择第 1 页，选择第 2 页，然后显示正确的页面(即:第 1 页显示前两行，第二页显示最后两行行)。

如果是这种情况，您可能会实现您的目标:

• 隐藏前两行，因为默认事件在第二页
• 为每个页面导航按钮添加一个点击事件处理程序:在此处理程序中执行适当的操作:切换可见性和更改事件页面。

//
// hide the first 2 rows
//
$('.container .row:lt(2)').hide();

$('.pagination li').on('click', function(e) {
    //
    // prevent default action
    //
    e.preventDefault();
    //
    // toggle active page
    //
    var lis = $(this).closest('.pagination').find('a:not([rel])')
                   .closest('li').toggleClass('active');
    //
    // get the number of active page
    //
    var txt = lis.filter('.active').find('a').text().trim();
    //
    // toggle visibility
    //
    $('.container .row:lt(2)').toggle(txt == '1');
    $('.container .row:gt(1)').toggle(txt == '2');
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<ul class="pagination">
    <li><a href="" rel="prev">Prev</a></li>
    <li><a href="">1</a></li>
    <li class="active"><a href="">2</a></li>
    <li><a href="" rel="next">Next</a></li>
</ul>
<div class="container">
    <div class="row">
        <div class="col-sm-4">1
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
        <div class="col-sm-4">1
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
        <div class="col-sm-4">1
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">2
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
        <div class="col-sm-4">2
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
        <div class="col-sm-4">2
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">3
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
        <div class="col-sm-4">3
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
        <div class="col-sm-4">3
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">4
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
        <div class="col-sm-4">4
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
        <div class="col-sm-4">4
            <img src="img/portfolio/sd.png" alt="portfolio" />
        </div>
    </div>
</div>