JSFiddle - React, Tailwind, and code Playground

by alexg88

HTML

<span id="lNombres"></span><br>
<input type="button" id="botprimero" value="Primero" />
<input type="button" id="botanterior" value="Anterior" />
<input type="button" id="botsiguiente" value="Siguiente" />
<input type="button" id="botultimo" value="Último" />

JavaScript

var nombre = new Array();
nombre = [["Daniel",35],
["Luis",42],
["María",19],
["María",51],
["David",28],
["Antonio",20],
["Carlos",31],
["Carlos",32],
["Mario",26],
["Mario",26]];

var Pagify = function(pArray, pCounter)
{
    var array = pArray;
    var pointer = 0;
    var btnPrevious;
    var btnNext;
    var btnFirst;
    var btnLast;
    var counter = pCounter;
    var self = this;
    
    this.canNext = function()
    {
        return (pointer + counter < array.length);      
    }
    
    this.canPrevious = function()
    {
        return (pointer >= counter);    
    }
    
    this.first = function()
    {        
        pointer = 0;
        self.show();
    }
    
    this.last = function()
    {
        var multiply = Math.floor(array.length / counter);        
        pointer = counter * multiply;
        self.show();
    }
    
    this.next = function()
    {    
        if (self.canNext())
        {
            pointer += counter;
            self.show();
        }
    }
    
    this.previous = function()
    {
        if (self.canPrevious())
        {
            pointer -= counter;
            self.show();
        }
    }
    
    this.setPreviousButton = function(buttonId)
    {
        btnPrevious = document.getElementById(buttonId);
        btnPrevious.onclick = self.previous;
    }
    
    this.setFirstButton = function(buttonId)
    {
        btnFirst =document.getElementById(buttonId);
        btnFirst.onclick = self.first;
    }
    
     this.setLastButton = function(buttonId)
    {
        btnLast = document.getElementById(buttonId);
        btnLast.onclick = self.last;
    }
    
    this.setNextButton = function(buttonId)
    {
        btnNext =document.getElementById(buttonId);
        btnNext.onclick = self.next;
    }
    
    this.show = function()
    {        
        document.getElementById("lNombres").innerHTML = "";
        
        for(var i = pointer; i < pointer + counter && i < array.length ; i++)
        {
         ...