Add Next/previous buttons pagenation

Question

How would I add next/previous buttons to this snippet. I actually don't want the numbers.

var itemsPerPage = 4;


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

var $pagination = $("<ul class='pagination'></ul>").each(function () {
    var itemsTotal = $list.children().size();
    var pages = Math.ceil(itemsTotal / itemsPerPage);
    for (var i = 1; i <= pages; i += 1) {
        $(this).append("<li>" + i + "</li>");
    }
}).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

Without numbers (the page variable needs to become global in order to be able to manage which page you're currently on):

$(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 = $("<ul class='pagination'></ul>").each(function () {
        var itemsTotal = $list.children().size();
        var pages = Math.ceil(itemsTotal / itemsPerPage);
        $(this).append("<li>" + prev + "</li>");
        $(this).append("<li>" + next + "</li>");
    }).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();
    });
});

With numbers (which page you're currently on can continue to be managed via the .selected class):

$(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 = $("<ul class='pagination'></ul>").each(function () {
        var itemsTotal = $list.children().size();
        var pages = Math.ceil(itemsTotal / itemsPerPage);
        $(this).append("<li>" + prev + "</li>");
        for (var i = 1; i <= pages; i += 1) {
            $(this).append("<li>" + i + "</li>");
        }
        $(this).append("<li>" + next + "</li>");
    }).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();
    });
});