twitter-bootstrap 我如何编程 bootstrap-3 分页以处理简单的 HTML 内容

How do I program bootstrap-3 pagination to work with simple HTML content

提问by José Miguel Ramos

I'm working in a "News" Section, and trying to make a bootstrap 3 pagination work with jquery.

我在“新闻”部分工作，并尝试使用 jquery 制作引导程序 3 分页。

HTML for the pagination:

分页的 HTML：

<nav class="text-center">
    <ul class="pagination">
        <li class="pag_prev">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li id="pag_1"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="pag_next">
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>

    </ul>
</nav>

JQuery:

查询：

$( document ).ready(function() { 
    $("#pag_1").addClass("active");
});

pageSize = 1;
var i = 1;

showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });
}

showPage(i);


$("#pagin li.numeros").click(function() {
    $("#pagin li").removeClass("active");
    $(this).addClass("active");
    i = parseInt($(this).text());
    showPage(i);
});

$("#pagin li.pag_prev").click(function() {
    $("#pagin li").removeClass("active");
    $(this).addClass("active");
    i = i - 1;
    showPage(i);
});

$("#pagin li.pag_next").click(function() {
    $("#pagin li").removeClass("active");
    $(this).addClass("active");
    i = i + 1;
    showPage(i);
});

I have 5 news for now, so I set the news per page in 1 (pageSize = 1;) so I can have 5 pages to navigate and make sure its working.

我现在有 5 条新闻，所以我将每页新闻设置为 1 ( pageSize = 1;)，这样我就可以有 5 页来导航并确保其正常工作。

My issues are:

我的问题是：

1. When I navigate the pages with the arrows (not the numbers), the numbers don't get the activeclass, and I couldnt figurate how to make it.
2. Im showing 5 pages, but you can navigate to infinite foward and backward, I don't know how to tell to stop when reach the last and the first page.
3. Is there a way to automatic generate a new <li class="numeros"><a href="#">No</a></li>and the respective page with JS when the page reach the amount of news setting (e.x. pageSize = 5)?

1. 当我用箭头（不是数字）浏览页面时，数字没有得到active课程，我无法弄清楚如何制作它。
2. 我显示了 5 页，但是您可以无限向前和向后导航，我不知道如何在到达最后一页和第一页时停止。
3. <li class="numeros"><a href="#">No</a></li>当页面达到新闻设置的数量（ex pageSize = 5）时，有没有办法用JS自动生成一个新的和相应的页面？

回答by Artur Filipiak

When I navigate the pages with the arrows (not the numbers), the numbers dont get the "active" class, and I couldnt figurate how to make it.

当我用箭头（不是数字）浏览页面时，数字没有得到“活动”类，我无法弄清楚如何制作它。

You should first check which "number"is actualy active, then add activeclass the next number (if pag_nextis clicked) or to the previous number (if pag_previs clicked).

你应该先检查其“数量”是actualy active，再加入active类的下一个数字（如pag_next点击）或以前的号码（如果pag_prev被点击）。

$(".pagination li.pag_prev").click(function() {
    // ...
    // instead of this (as "this" is the arrow):
    // $(this).addClass("active");
    // remove active class of the current number and add the class to previous number:
    $('.numeros.active').removeClass('active').prev().addClass('active');

    // ...
});

$(".pagination li.pag_next").click(function() {
    // ...
    // instead of this (as "this" is the arrow):
    // $(this).addClass("active");
    // remove active class of the current number and add the class to next number:
    $('.numeros.active').removeClass('active').next().addClass('active');

    // ...
});

---

---

Im showing 5 pages, but you can navigate to infinite foward and backward, i don't know how to tell to stop when reach the last and the first page.

我显示了 5 页，但是您可以无限向前和向后导航，我不知道如何在到达最后一页和第一页时停止。

You should simply check if the firstor lastpagination number already has class active, then return(do nothing) if one of them has:

您应该简单地检查第一个或最后一个分页号是否已经有 class active，然后return（什么都不做）如果其中一个有：

$(".pagination li.pag_prev").click(function() {
    // make sure that the active pagination number is not the first.
    // we want to return here (do nothing) if the first number is already active:
    if($(this).next().is('.active')) return;
    // ...
    // continue executing if the first number isn't yet active:
    currentPage--;
    showPage();
});

$(".pagination li.pag_next").click(function() {
    // make sure that the active pagination number is not the last.
    // we want to return here (do nothing) if the last number is already active:
    if($(this).prev().is('.active')) return;
    // ...
    // continue executing if the last number isn't yet active:
    currentPage++;
    showPage();
});

---

---

Is there a way to automatic generate a new No and the respective page with JS when the page reach the amount of news setting (e.x. pageSize = 5)?

当页面达到新闻设置的数量（ex pageSize = 5）时，有没有办法用JS自动生成一个新的No和相应的页面？

Yes.

是的。

First, we need some more variables:

首先，我们需要更多的变量：

// news per page:
var pageSize = 1;
// total news (count elements with "content" class):
var pagesCount = $(".content").length;
// calculate total pages:
var totalPages = Math.ceil(pagesCount / pageSize);

// I have replaced "i" variable with "currentPage" (more details at the bottom)
var currentPage = 1;

We already know the totalPagesand pageSize, so we can create pagination dynamically based on total amount of news and the number of news per page:

我们已经知道totalPagesand pageSize，因此我们可以根据新闻总量和每页新闻数量动态创建分页：

HTML:

HTML：

<ul class="pagination">
    <li class="pag_prev">
        <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <!-- our dynamic pagination content goes here -->
    <li class="pag_next">
        <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>

JS:

JS：

var nav = '';
for (var s=0; s<totalPages; s++){
    nav += '<li class="numeros"><a href="#">'+(s+1)+'</a></li>';
}
// append pagination numbers after "prev" button:
$(".pag_prev").after(nav);
// add "active" class to the first pagination number:
$(".numeros").first().addClass("active");

---

---

As a side note, your ivariable is set in a global scope, so you don't have to pass it every time to the showPage()method and you can use it direclty.
I renamed this variable to something more "readable"- currentPage:

附带说明一下，您的i变量设置在全局范围内，因此您不必每次都将它传递给该showPage()方法，并且可以直接使用它。
我将此变量重命名为更“可读”的内容- currentPage：

var currentPage = 1;

showPage = function() {
    $(".content").hide().each(function(n) {
        if (n >= pageSize * (currentPage - 1) && n < pageSize * currentPage)
            $(this).show();
    });
}

showPage();

---

---

Whole code on JSFiddle

JSFiddle上的完整代码