Tabla Paginada Con VanillaJS

DanielCortes -

Muy buenas noches miembros de EDTeam, quisiera pedirles retroalimentación sobre un pequeño modulo que estoy creando.

Verán, estoy haciendo mis prácticas profesionales en una empresa de desarrollo web, donde estamos remodelando un sistema de ERP en cuanto a diseño y tenemos que hacerlo adaptable a dispositivos móviles.

Dentro de los módulos que tengo asignados para remodelar existen varios con distintas tablas hechas con Jquery (específicamente con la librería Data-tables), los cuales decidí cambiar por tablas paginadas con VanillaJS. El objetivo de este cambio es no usar JQuery en el proyecto.

Diseñé un script para paginar una tabla, el único problema es que en sitios donde se encuentren más de 1 sola tabla, va a trabajar con la primera y las demás las va a ignorar.

Pueden encontrar el ejemplo funcionando aquí: https://codepen.io/danCortes0209/pen/pGzGvY

Este es el script:

let table = document.getElementById('tabla-datos'),
    headings = table.rows[0].firstElementChild.tagName === 'TH' ? table.rows[(0)].outerHTML : '',
    trLines = [],
    rowsPerPage = 15,
    pageCount = Math.ceil((table.rows.length - 1 ) / rowsPerPage);

if (pageCount > 1) {
    for (let indexRows = headings ? 1 : 0, indexNewRows = 0; indexRows < table.rows.length; indexRows++, indexNewRows++) {
        trLines[indexNewRows] = table.rows[indexRows].outerHTML;
    }

    document.getElementById('tabla-contenedor').insertAdjacentHTML("afterend","<div id='buttons' class='table__buttons'>Holi</div>");
    sortTable(1);
}

if (table.rows.length <= 1) {
    let headCount = table.rows[0].childElementCount,
        emptyRow = document.createElement('TR'),
        emptyItem = document.createElement('TD');
    emptyRow.classList.add('table__line');
    emptyItem.classList.add('table__item');
    emptyItem.classList.add('table__item--empty');
    emptyItem.setAttribute('colspan',headCount);
    emptyItem.innerText = 'No hay datos en esta tabla';
    emptyRow.appendChild(emptyItem);
    table.appendChild(emptyRow);
}

function sortTable(selectedPage) {
    let lines = headings, startPoint = ((rowsPerPage * selectedPage) - rowsPerPage);
    for (let index = startPoint; index < (startPoint + rowsPerPage) &amp;&amp; index < trLines.length; index++) {
        lines += trLines[index];
    }
    table.innerHTML = lines;

    document.getElementById("buttons").innerHTML = addButtons(pageCount, selectedPage);

    document.getElementById(`tablepage_${selectedPage}`).setAttribute("class","table__button table__button--active");

}

function addButtons(nPages, currentPage) {
    let disablePrev = (currentPage == 1) ? "disabled" : "", 
        disableNext = (nPages == currentPage) ? "disabled" : "",
        buttons = `<input type="button" class="table__button table__button--prev" value="&amp;lt;&amp;lt; Prev" onclick="sortTable(${currentPage - 1})" ${disablePrev}>`;

    for (let index = 1; index <= nPages; index++) {
        buttons += `<input type="button" id="tablepage_${index}" class="table__button" value="${index}" onclick="sortTable(${index})">`;
    }

    buttons += `<input type="button" class="table__button table__button--next" value="Next &amp;gt;&amp;gt;" onclick="sortTable(${currentPage + 1})" ${disableNext}>`;

    return buttons;
}

Para solucionar este problema, decidí refactorizar el código para utilizar todos los elementos encontrados con el mismo ID, y aplicar las funciones a cada tabla. Ya conseguí el limitar los registros por tabla, lo que no he logrado es que los botones funcionen: Este es el nuevo script (también se encuentra dentro del Codepen):

let tables = document.querySelectorAll('#tabla-datos');
let counter = 0;

tables.forEach(table => {
	counter++;
	let headings = table.rows[0].firstElementChild.tagName === 'TH' ? table.rows[(0)].outerHTML : '',
    	trLines = [],
    	rowsPerPage = 15,
    	pageCount = Math.ceil((table.rows.length - 1 ) / rowsPerPage);
    
    if (pageCount > 1) {
    	for (let indexRows = headings ? 1 : 0, indexNewRows = 0; indexRows < table.rows.length; indexRows++, indexNewRows++) {
        	trLines[indexNewRows] = table.rows[indexRows].outerHTML;
    	}
		sortTable(1);
	}
    if (table.rows.length <= 1) {
    	let headCount = table.rows[0].childElementCount,
        	emptyRow = document.createElement('TR'),
        	emptyItem = document.createElement('TD');
    	emptyRow.classList.add('table__line');
    	emptyItem.classList.add('table__item');
    	emptyItem.classList.add('table__item--empty');
    	emptyItem.setAttribute('colspan',headCount);
    	emptyItem.innerText = 'No hay datos en esta tabla';
    	emptyRow.appendChild(emptyItem);
    	table.appendChild(emptyRow);
	}
    
    function sortTable(selectedPage) {
    	let lines = headings, startPoint = ((rowsPerPage * selectedPage) - rowsPerPage);
    	for (let index = startPoint; index < (startPoint + rowsPerPage) &amp;&amp; index < trLines.length; index++) {
        	lines += trLines[index];
    	}
    	table.innerHTML = lines;

		table.parentElement.insertAdjacentHTML("afterend",`<div class='table__buttons'>${addButtons(pageCount, selectedPage)}</div>`);
        document.getElementById(`table-${counter}-page_${selectedPage}`).setAttribute("class","table__button table__button--active");
	}
    
    
    function addButtons(nPages, currentPage) {
    	let disablePrev = (currentPage == 1) ? "disabled" : "", 
        	disableNext = (nPages == currentPage) ? "disabled" : "",
        	buttons = `<input type="button" class="table__button table__button--prev" value="&amp;lt;&amp;lt; Prev" onclick="sortTable(${currentPage - 1})" ${disablePrev}>`;

    	for (let index = 1; index <= nPages; index++) {
        	buttons += `<input type="button" id="table-${counter}-page_${index}" class="table__button" value="${index}" onclick="sortTable(${index})">`;
    	}

    	buttons += `<input type="button" class="table__button table__button--next" value="Next &amp;gt;&amp;gt;" onclick="sortTable(${currentPage + 1})" ${disableNext}>`;

    	return buttons;
	}
});

Quisiera pedirles ayuda, necesito retroalimentación tanto sobre mi código y que corregirían ustedes para hacerlo más funcional y sobre el funcionamiento de los botones.

Pensé el utilizar el ID de la tabla a modificar para darle clic a los botones como tal, pero no logro visualizar (aun) una forma de realizar esto. Agradezco su atención y les agradecería mucho que me comenten sobre mi código, si está bien o hay algo que modificarían. ¡¡¡Saludos!!!

Alexys Lozada

El problema es que los ID deben ser únicos y estás utilizando el mismo ID para diferentes tablas. Debes corregir eso y ya podrás realizar tareas fácilmente.

Necesitas iniciar sesión para responder.
Necesitas iniciar sesión para responder.