javascript - 如何对 bootstrap-3 分页进行编程以处理简单的 HTML 内容

Question

我在“新闻”部分工作，并尝试使用 jquery 使 bootstrap 3 分页工作。

分页的 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);
});

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

我的问题是:

1. 当我使用箭头(而不是数字)浏览页面时，数字没有得到 active上课，但我不知道该怎么做。
2. 我显示了 5 页，但你可以无限向前和向后导航，我不知道如何在到达最后一页和第一页时停止。
3. 有没有办法自动生成一个新的<li class="numeros"><a href="#">Nº</a></li>以及当页面达到设置的新闻量(例如 pageSize = 5 )时带有 JS 的相应页面？

Answer 1

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.

你应该首先检查哪个“number”是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.

您应该简单地检查first 或last 分页号是否已经有类active，然后返回 (什么都不做)如果其中之一有:

$(".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 Nº and the respective page with JS when the page reach the amount of news setting (e.x. pageSize = 5)?

是的。

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

// 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;

我们已经知道totalPages 和pageSize，所以我们可以根据新闻总量和每页新闻数动态创建分页:

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:

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");

---

作为旁注，您的 i 变量是在全局范围内设置的，因此您不必每次都将其传递给 showPage() 方法，并且你可以直接使用它。
我将此变量重命名为更“可读” - currentPage:

var currentPage = 1;

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

showPage();

---

JSFiddle 上的完整代码