JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<div id="contenedor">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<br /><br />
<div id="anterior">Ante</div>
<div id="nums"></div>
<div id="siguiente">Sig</div>

CSS

.paginaActual
{
    color: red;
}

JavaScript

(function ($) {
    $.fn.paginar = function(options) {
        var _this = $(this),
            actual = 1,
            cantPags = 0,
            spanPagina = function(numPag) {
                var span = $("<span></span>");
                if(numPag == actual)
                    span.addClass("paginaActual");
                span.html(numPag).addClass("spanPaginado").click(function() {
                    pasarAPag(numPag);
                });
                return span;
            },
            pasarAPag = function(num) {
                var start = ((num - 1) * options.porPag) - 1,
                    end = num * options.porPag;
                _this.find(">*").hide()
                    .filter(":lt(" + end + ")" + ((start >= 0) ? ":gt(" + start + ")" : "")).show();
                actual = num;
                options.contenedorNums.empty();
                if(actual - 1 > 0)
                    options.contenedorNums.append(spanPagina(actual - 1));
                options.contenedorNums.append(spanPagina(actual));
                if(actual + 1 <= cantPags)
                    options.contenedorNums.append(spanPagina(actual + 1));
            };
        
        options = $.extend({
            porPag: 5,
            elemSiguiente: $(),
            elemAnterior: $(),
            contenedorNums: $()
        }, options);
        
        cantPags = parseInt($(this).find(">*").length / options.porPag);
        if(cantPags != $(this).find(">*").length / options.porPag)
            cantPags++;

        options.elemSiguiente.click(function() {
            if(actual + 1 <= cantPags)
                pasarAPag(actual + 1);
        });
        
        options.elemAnterior.click(function() {
            if(actual - 1 > 0)
                pasarAPag(actual - 1);
        });
        
        pasarAPag(1);
        
        return _this;
    };
})(jQuery);

$(function() {
    $("#contenedor").paginar({
        porPag: 5,
        elemSiguiente: $("#siguiente"),
       ...