Ajouter des boutons Suivant/Précédent pagination

Question

Comment puis-je ajouter des boutons suivant/précédent à ce code. En fait, je ne veux pas les numéros.

var itemsPerPage = 4;

var $entries = $("#entries");
var $list = $entries.children("ul:first");
$list.children().eq(itemsPerPage).nextAll().andSelf().hide();

var $pagination = $("").each(function () {
    var itemsTotal = $list.children().size();
    var pages = Math.ceil(itemsTotal / itemsPerPage);
    for (var i = 1; i <= pages; i += 1) {
        $(this).append("" + i + "");
    }
}).appendTo($entries);
$pagination.children("li:first").addClass("selected");
$pagination.children().click(function () {
    if ($(this).is(".selected")) {
        return;
    }
    var page = $(this).index() + 1;
    var firstToShow = (page - 1) * itemsPerPage;
    var lastToShow = page * itemsPerPage;
    $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow');
    $(this).addClass("selected").siblings(".selected").removeClass("selected");
});

Answer 1

Sans numéros (la variable page doit devenir globale pour pouvoir gérer la page sur laquelle vous vous trouvez actuellement):

$(document).ready(function () {

    var page = 1;
    var itemsPerPage = 4;
    var prev = "<<";
    var next = ">>";

    var $entries = $("#entries");
    var $list = $entries.children("ul:first");
    $list.children().eq(itemsPerPage).nextAll().andSelf().hide();

    var $pagination = $("").each(function () {
        var itemsTotal = $list.children().size();
        var pages = Math.ceil(itemsTotal / itemsPerPage);
        $(this).append("" + prev + "");
        $(this).append("" + next + "");
    }).appendTo($entries);
    $pagination.children("li:first").hide();
    $pagination.children().click(function () {

        if ($(this).text() == prev)
            page = page - 1;
        else if ($(this).text() == next)
            page = page + 1;

        var firstToShow = (page - 1) * itemsPerPage;
        var lastToShow = page * itemsPerPage;
        $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow');
        $($(this).parent().find("li")[page]).addClass("selected").siblings(".selected").removeClass("selected");

        if (page == 1)
            $(this).parent().find("li:first").hide();
        else
            $(this).parent().find("li:first").show();
        if (page == Math.ceil($list.children().size() / itemsPerPage))
            $(this).parent().find("li:last").hide();
        else
            $(this).parent().find("li:last").show();
    });
});

Avec des numéros (la gestion de la page sur laquelle vous vous trouvez peut continuer à être gérée via la classe .selected):

$(document).ready(function () {

    var itemsPerPage = 4;
    var prev = "<<";
    var next = ">>";

    var $entries = $("#entries");
    var $list = $entries.children("ul:first");
    $list.children().eq(itemsPerPage).nextAll().andSelf().hide();

    var $pagination = $("").each(function () {
        var itemsTotal = $list.children().size();
        var pages = Math.ceil(itemsTotal / itemsPerPage);
        $(this).append("" + prev + "");
        for (var i = 1; i <= pages; i += 1) {
            $(this).append("" + i + "");
        }
        $(this).append("" + next + "");
    }).appendTo($entries);
    $pagination.children("li:first").hide();
    $pagination.children("li:eq(1)").addClass("selected");
    $pagination.children().click(function () {

        if ($(this).is(".selected")) { return; }

        var page;
        var selectedNode = $(this).parent().find(".selected");
        if ($(this).text() == prev)
            page = selectedNode.index() - 1;
        else if ($(this).text() == next)
            page = selectedNode.index() + 1;
        else
            page = $(this).index();

        var firstToShow = (page - 1) * itemsPerPage;
        var lastToShow = page * itemsPerPage;
        $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow');
        $($(this).parent().find("li")[page]).addClass("selected").siblings(".selected").removeClass("selected");

        if (page == 1)
            $(this).parent().find("li:first").hide();
        else
            $(this).parent().find("li:first").show();
        if (page == Math.ceil($list.children().size() / itemsPerPage))
            $(this).parent().find("li:last").hide();
        else
            $(this).parent().find("li:last").show();
    });
});