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

Question

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

HTML for the pagination:

<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.

My issues are:

1. When I navigate the pages with the arrows (not the numbers), the numbers don't get the active class, 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="#">Nº</a></li> and the respective page with JS when the page reach the amount of news setting (e.x. pageSize = 5)?

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.

You should first check which "number" is actualy active, then add active class the next number (if pag_next is clicked) or to the previous number (if pag_prev is clicked).

$(".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.

You should simply check if the first or last pagination number already has class active, then return (do nothing) if one of them has:

$(".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)?

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 totalPages and pageSize, so we can create pagination dynamically based on total amount of news and the number of news per page:

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

---

As a side note, your i variable 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:

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