Como paginar una tabla únicamente con Javascript

Para paginar una tabla, no es necesario ningún componente de terceros, ya que únicamente con unas pocas líneas de Javascript lo podemos conseguir.

Para esto, necesitaremos que nuestra tabla tenga un atributo ID y dos enlaces/botones para realizar las funciones de avanzar y retroceder en las paginas de la tabla.

Procedimiento

El procedimiento consiste en tener una variable que nos indique el numero de registros que queremos visualizar por pantalla, y contando todas las filas (<tr>) de la tabla, para poder calcular el numero de páginas de las que disponemos.

Tanto si llegamos al inicio como al final, en ese momento el enlace/boton de Avanzar y/o Retroceder, desaparecen para que no pueda salirse.

Video

Código

HTML

En la tabla tenemos que añadir el atributo ID

<table border="1" id="myTable">

Y crear los botones / enlaces (yo he creado enlaces) para poder movernos entre las paginas, tambien con su ID cada uno. Y un texto entre ellos para saber en que posicion de la tabla estamos

<a href="#" onclick="prevPage()" id="btn_prev"><<</a>
Page: <span id="page"></span>
<a href="#" onclick="nextPage()" id="btn_next">>></a>

Javascript

var current_page = 1;
      var record_per_page = document.getElementById("record_per_page").value;
      var tabla = 10;

      var l = tabla
        .getElementsByTagName("tbody")[0]
        .getElementsByTagName("tr").length;
      console.log("NUM. Rows: " + l);

      function prevPage() {
        if (current_page > 1) {
          current_page--;
          changePage(current_page);
        }
      }

      function nextPage() {
        if (current_page < numPages()) {
          current_page++;
          changePage(current_page);
        }
      }

      function changePage(page) {
        var btn_next = document.getElementById("btn_next");
        var btn_prev = document.getElementById("btn_prev");
        var listing_table = document.getElementById("myTable");
        var page_span = document.getElementById("page");

        if (page < 1) page = 1;
        if (page > numPages()) page = numPages();

        [
          ...listing_table
            .getElementsByTagName("tbody")[0]
            .getElementsByTagName("tr"),
        ].forEach((tr) => {
          tr.style.display = "none";
        });
        listing_table.rows[0].display = ""; // Titulo

        for (
          var i = (page - 1) * record_per_page + 1;
          i < page * record_per_page + 1;
          i++
        ) {
          if (listing_table.rows[i]) {
            listing_table.rows[i].style.display = "";
          } else {
            continue;
          }
        }

        page_span.innerHTML = page + " / " + numPages();

        if (page == 1) {
          btn_prev.style.visibility = "hidden";
        } else {
          btn_prev.style.visibility = "visible";
        }

        if (page == numPages()) {
          btn_next.style.visibility = "hidden";
        } else {
          btn_next.style.visibility = "visible";
        }
      }

      function numPages() {
        return Math.ceil(l / record_per_page);
      }

      window.onload = function () {
        changePage(current_page);
      };

Tienes la página completa en nuestro GitHub