Parâmetros de Configuração

Código do Plugin

/**
 * Plugin jQuery para exibir controles de paginação
 * @param {int} totalRegistros Número total de registros
 * @param {Object} opcoes Configurações opcionais
 */
(function($) {
    $.fn.paginacao = function(totalRegistros, opcoes) {
        var config = $.extend({
            itensPorPagina: 10,
            exibicaoContinua: 10,
            paginaAtual: 0,
            exibicaoBordas: 0,
            urlPadrao: "#",
            textoAnterior: "Anterior",
            textoProximo: "Próximo",
            textoReticencias: "...",
            mostrarAnterior: true,
            mostrarProximo: true,
            callback: function() { return false; }
        }, opcoes || {});

        return this.each(function() {
            function calcularTotalPaginas() {
                return Math.ceil(totalRegistros / config.itensPorPagina);
            }

            function obterIntervalo() {
                var metade = Math.ceil(config.exibicaoContinua / 2);
                var total = calcularTotalPaginas();
                var limite = total - config.exibicaoContinua;
                var inicio = config.paginaAtual > metade ? 
                    Math.max(Math.min(config.paginaAtual - metade, limite), 0) : 0;
                var fim = config.paginaAtual > metade ? 
                    Math.min(config.paginaAtual + metade, total) : 
                    Math.min(config.exibicaoContinua, total);
                return [inicio, fim];
            }

            function paginaSelecionada(novaPagina, evento) {
                config.paginaAtual = novaPagina;
                renderizarLinks();
                var continuar = config.callback(novaPagina, container);
                if (!continuar) {
                    if (evento.stopPropagation) evento.stopPropagation();
                    else evento.cancelBubble = true;
                }
                return continuar;
            }

            function renderizarLinks() {
                container.empty();
                var intervalo = obterIntervalo();
                var total = calcularTotalPaginas();
                
                function criarManipulador(pg) {
                    return function(evt) { 
                        return paginaSelecionada(pg, evt); 
                    };
                }

                function adicionarItem(pg, opcoesExtra) {
                    pg = pg < 0 ? 0 : (pg < total ? pg : total - 1);
                    var opcoes = $.extend({
                        texto: pg + 1, 
                        classes: "atual"
                    }, opcoesExtra || {});
                    
                    var elemento;
                    if (pg == config.paginaAtual) {
                        elemento = $("<span class='atual'>" + opcoes.texto + "</span>");
                    } else {
                        elemento = $("<a>" + opcoes.texto + "</a>")
                            .bind("click", criarManipulador(pg))
                            .attr('href', config.urlPadrao.replace(/\_\_id\_\_/, pg));
                    }
                    
                    if (opcoes.classes) {
                        elemento.removeAttr('class').addClass(opcoes.classes);
                    }
                    container.append(elemento);
                }

                if (config.textoAnterior && (config.paginaAtual > 0 || config.mostrarAnterior)) {
                    adicionarItem(config.paginaAtual - 1, { 
                        texto: config.textoAnterior, 
                        classes: "desativado" 
                    });
                }

                if (intervalo[0] > 0 && config.exibicaoBordas > 0) {
                    var limite = Math.min(config.exibicaoBordas, intervalo[0]);
                    for (var i = 0; i < limite; i++) {
                        adicionarItem(i);
                    }
                    if (config.exibicaoBordas < intervalo[0] && config.textoReticencias) {
                        $("<span>" + config.textoReticencias + "</span>").appendTo(container);
                    }
                }

                for (var i = intervalo[0]; i < intervalo[1]; i++) {
                    adicionarItem(i);
                }

                if (intervalo[1] < total && config.exibicaoBordas > 0) {
                    if (total - config.exibicaoBordas > intervalo[1] && config.textoReticencias) {
                        $("<span>" + config.textoReticencias + "</span>").appendTo(container);
                    }
                    var inicio = Math.max(total - config.exibicaoBordas, intervalo[1]);
                    for (var i = inicio; i < total; i++) {
                        adicionarItem(i);
                    }
                }

                if (config.textoProximo && (config.paginaAtual < total - 1 || config.mostrarProximo)) {
                    adicionarItem(config.paginaAtual + 1, { 
                        texto: config.textoProximo, 
                        classes: "desativado" 
                    });
                }
            }

            var container = $(this);
            totalRegistros = (!totalRegistros || totalRegistros < 0) ? 1 : totalRegistros;
            config.itensPorPagina = (!config.itensPorPagina || config.itensPorPagina < 0) ? 1 : config.itensPorPagina;

            this.selecionarPagina = function(pg) { 
                paginaSelecionada(pg); 
            };
            
            this.paginaAnterior = function() {
                if (config.paginaAtual > 0) {
                    paginaSelecionada(config.paginaAtual - 1);
                    return true;
                }
                return false;
            };
            
            this.proximaPagina = function() {
                if (config.paginaAtual < calcularTotalPaginas() - 1) {
                    paginaSelecionada(config.paginaAtual + 1);
                    return true;
                }
                return false;
            };

            renderizarLinks();
        });
    };
})(jQuery);

Estilos CSS

/* Estilo Padrão */
.paginacao {padding: 3px; margin: 3px; text-align: center;}
.paginacao a {border: #ddd 1px solid; padding: 2px 5px; margin: 2px; color: #666; text-decoration: none;}
.paginacao a:hover {border: #666 1px solid; color: #000;}
.paginacao span.atual {border: #666 1px solid; padding: 2px 5px; font-weight: bold; margin: 2px; color: #fff; background-color: #666;}
.paginacao span.desativado {border: #eee 1px solid; padding: 2px 5px; margin: 2px; color: #ccc;}

/* Estilo Azul */
.paginacao-azul a {border: #cce5ff 1px solid; color: #0066cc;}
.paginacao-azul a:hover {border: #0066cc 1px solid; background-color: #e6f3ff;}
.paginacao-azul span.atual {border: #0066cc 1px solid; background-color: #0066cc;}

/* Estilo Escuro */
.paginacao-escuro {background-color: #333; color: #fff;}
.paginacao-escuro a {border: #666 1px solid; color: #ccc;}
.paginacao-escuro a:hover {border: #fff 1px solid; color: #fff; background-color: #555;}
.paginacao-escuro span.atual {border: #fff 1px solid; background-color: #555;}

Implementação Frontend

<script src="jquery.paginacao.js"></script>
<link rel="stylesheet" href="paginacao.css">

<div id="lista-dados">
    <!-- Conteúdo será inserido aqui -->
</div>

<div id="controle-paginacao" class="paginacao"></div>

<script>
$(document).ready(function() {
    function carregarDados(pagina) {
        var inicio = pagina * 10;
        var fim = inicio + 10;
        
        // Simulação de requisição AJAX
        $.ajax({
            url: '/api/dados',
            data: {inicio: inicio, fim: fim},
            success: function(resposta) {
                var html = '';
                for(var i = 0; i < resposta.length; i++) {
                    html += '<div class="item">' + resposta[i].nome + '</div>';
                }
                $('#lista-dados').html(html);
            }
        });
    }
    
    function aoMudarPagina(pagina) {
        carregarDados(pagina);
        return false;
    }
    
    $("#controle-paginacao").paginacao(150, {
        callback: aoMudarPagina,
        itensPorPagina: 10,
        exibicaoContinua: 5,
        exibicaoBordas: 2,
        textoAnterior: "←",
        textoProximo: "→",
        urlPadrao: "?pagina=__id__"
    });
    
    carregarDados(0);
});
</script>

Exemplos de Visualização