arturo-source/pagination.js

## pagination.js
class Paginator {
  constructor({
    elements,
    cellsPerRow = 5,
    rowsPerPage = 4,
    renderFunc,
    prevBtn,
    nextBtn,
    firstBtn,
    lastBtn,
  }) {
    this.elements = elements;

    this.currentPage = 0;

    this.cellsPerRow = cellsPerRow;
    this.rowsPerPage = rowsPerPage;

    this.renderFunc = renderFunc;

    this.prevBtn = prevBtn;
    this.nextBtn = nextBtn;
    this.firstBtn = firstBtn;
    this.lastBtn = lastBtn;

    if (this.prevBtn != undefined)
      this.prevBtn.onclick = () => this.goToPrevPage();

    if (this.nextBtn != undefined)
      this.nextBtn.onclick = () => this.goToNextPage();

    if (this.firstBtn != undefined)
      this.firstBtn.onclick = () => this.goToFirstPage();

    if (this.lastBtn != undefined)
      this.lastBtn.onclick = () => this.goToLastPage();
  }

  render() {
    if (this.currentPage == 0) {
      this.prevBtn?.setAttribute("disabled", "");
      this.firstBtn?.setAttribute("disabled", "");
    } else {
      this.prevBtn?.removeAttribute("disabled", "");
      this.firstBtn?.removeAttribute("disabled", "");
    }

    if (this.currentPage == this.lastPage || this.lastPage == 0) {
      this.nextBtn?.setAttribute("disabled", "");
      this.lastBtn?.setAttribute("disabled", "");
    } else {
      this.nextBtn?.removeAttribute("disabled", "");
      this.lastBtn?.removeAttribute("disabled", "");
    }

    this.renderFunc(this.currentElements);
  }

  getCurrentPageInfo(messageGeneratorFunc) {
    return messageGeneratorFunc({
      count: this.cellsPerPage,
      curr: this.currentPage + 1,
      last: this.lastPage + 1,
    });
  }

  goToPrevPage() {
    if (this.currentPage > 0) {
      this.currentPage--;
      this.render();
    }
  }
  goToNextPage() {
    if (this.currentPage < this.lastPage) {
      this.currentPage++;
      this.render();
    }
  }
  goToFirstPage() {
    this.currentPage = 0;
    this.render();
  }
  goToLastPage() {
    this.currentPage = this.lastPage;
    this.render();
  }

  get cellsPerPage() {
    return this.rowsPerPage * this.cellsPerRow;
  }
  get lastPage() {
    return Math.floor(this.elements.length / this.cellsPerPage);
  }
  get currentElements() {
    let next_pos = this.currentPage * this.cellsPerPage;
    let table = Array(this.rowsPerPage).fill(Array());
    for (const i in table) {
      table[i] = Array(this.cellsPerRow);
    }

    for (let i = 0; i < this.rowsPerPage; i++) {
      for (let j = 0; j < this.cellsPerRow; j++) {
        if (next_pos < this.elements.length) {
          table[i][j] = this.elements[next_pos];
          next_pos++;
        }
      }
    }

    return table;
  }
}

## z_example_of_use.html
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- necessary html headers -->
  <script src="./pagination.js"></script>
</head>

<body>
  <div class="tablecontainer">
    <h1 id="msg"></h1>
    <table id="maintable"></table>
  </div>
  <div class="inputscontainer">
    <button class="btn" id="first">First</button>
    <button class="btn" id="prev">Previous</button>
    <button class="btn" id="next">Next</button>
    <button class="btn" id="last">Last</button>
  </div>
</body>

<script>
  function renderTable(currentElements) {
    // Example of render...
    let tableContent = "<tr>";
    for (const row of currentElements) {
      for (const cell of row) {
          tableContent += `<td>${cell == undefined ? '&nbsp;' : cell}</td>`;
      }
      tableContent += "</tr><tr>";
    }
    tableContent += "</tr>";

    document.getElementById("maintable").innerHTML = tableContent;
  }
  window.onload = () => {
    let prevBtn = document.getElementById("prev"); // Introduce btn ID
    let nextBtn = document.getElementById("next"); // Introduce btn ID
    let firstBtn = document.getElementById("first"); // Introduce btn ID
    let lastBtn = document.getElementById("last"); // Introduce btn ID

    var paginator = new Paginator({
      elements: [2, 3, 65, "sd", "dfo", "95j", 3],
      cellsPerRow: 5,
      rowsPerPage: 4,
      renderFunc: renderTable, // renderFunc must be a func that receives elements to render
      prevBtn: prevBtn,
      nextBtn: nextBtn,
      firstBtn: firstBtn,
      lastBtn: lastBtn,
    });

    var currentElements = paginator.currentElements;
    var currentPage = paginator.currentPage;
    var lastPage = paginator.lastPage;
    var pageInfo = paginator.getCurrentPageInfo(({count, curr, last}) => `${count} items | Page ${curr} of ${last}`);
};
</script>

</html>
	class Paginator {
	constructor({
	elements,
	cellsPerRow = 5,
	rowsPerPage = 4,
	renderFunc,
	prevBtn,
	nextBtn,
	firstBtn,
	lastBtn,
	}) {
	this.elements = elements;

	this.currentPage = 0;

	this.cellsPerRow = cellsPerRow;
	this.rowsPerPage = rowsPerPage;

	this.renderFunc = renderFunc;

	this.prevBtn = prevBtn;
	this.nextBtn = nextBtn;
	this.firstBtn = firstBtn;
	this.lastBtn = lastBtn;

	if (this.prevBtn != undefined)
	this.prevBtn.onclick = () => this.goToPrevPage();

	if (this.nextBtn != undefined)
	this.nextBtn.onclick = () => this.goToNextPage();

	if (this.firstBtn != undefined)
	this.firstBtn.onclick = () => this.goToFirstPage();

	if (this.lastBtn != undefined)
	this.lastBtn.onclick = () => this.goToLastPage();
	}

	render() {
	if (this.currentPage == 0) {
	this.prevBtn?.setAttribute("disabled", "");
	this.firstBtn?.setAttribute("disabled", "");
	} else {
	this.prevBtn?.removeAttribute("disabled", "");
	this.firstBtn?.removeAttribute("disabled", "");
	}

	if (this.currentPage == this.lastPage \|\| this.lastPage == 0) {
	this.nextBtn?.setAttribute("disabled", "");
	this.lastBtn?.setAttribute("disabled", "");
	} else {
	this.nextBtn?.removeAttribute("disabled", "");
	this.lastBtn?.removeAttribute("disabled", "");
	}

	this.renderFunc(this.currentElements);
	}

	getCurrentPageInfo(messageGeneratorFunc) {
	return messageGeneratorFunc({
	count: this.cellsPerPage,
	curr: this.currentPage + 1,
	last: this.lastPage + 1,
	});
	}

	goToPrevPage() {
	if (this.currentPage > 0) {
	this.currentPage--;
	this.render();
	}
	}
	goToNextPage() {
	if (this.currentPage < this.lastPage) {
	this.currentPage++;
	this.render();
	}
	}
	goToFirstPage() {
	this.currentPage = 0;
	this.render();
	}
	goToLastPage() {
	this.currentPage = this.lastPage;
	this.render();
	}

	get cellsPerPage() {
	return this.rowsPerPage * this.cellsPerRow;
	}
	get lastPage() {
	return Math.floor(this.elements.length / this.cellsPerPage);
	}
	get currentElements() {
	let next_pos = this.currentPage * this.cellsPerPage;
	let table = Array(this.rowsPerPage).fill(Array());
	for (const i in table) {
	table[i] = Array(this.cellsPerRow);
	}

	for (let i = 0; i < this.rowsPerPage; i++) {
	for (let j = 0; j < this.cellsPerRow; j++) {
	if (next_pos < this.elements.length) {
	table[i][j] = this.elements[next_pos];
	next_pos++;
	}
	}
	}

	return table;
	}
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<!-- necessary html headers -->
	<script src="./pagination.js"></script>
	</head>

	<body>
	<div class="tablecontainer">
	<h1 id="msg"></h1>
	<table id="maintable"></table>
	</div>
	<div class="inputscontainer">
	<button class="btn" id="first">First</button>
	<button class="btn" id="prev">Previous</button>
	<button class="btn" id="next">Next</button>
	<button class="btn" id="last">Last</button>
	</div>
	</body>

	<script>
	function renderTable(currentElements) {
	// Example of render...
	let tableContent = "<tr>";
	for (const row of currentElements) {
	for (const cell of row) {
	tableContent += `<td>${cell == undefined ? ' ' : cell}</td>`;
	}
	tableContent += "</tr><tr>";
	}
	tableContent += "</tr>";

	document.getElementById("maintable").innerHTML = tableContent;
	}
	window.onload = () => {
	let prevBtn = document.getElementById("prev"); // Introduce btn ID
	let nextBtn = document.getElementById("next"); // Introduce btn ID
	let firstBtn = document.getElementById("first"); // Introduce btn ID
	let lastBtn = document.getElementById("last"); // Introduce btn ID

	var paginator = new Paginator({
	elements: [2, 3, 65, "sd", "dfo", "95j", 3],
	cellsPerRow: 5,
	rowsPerPage: 4,
	renderFunc: renderTable, // renderFunc must be a func that receives elements to render
	prevBtn: prevBtn,
	nextBtn: nextBtn,
	firstBtn: firstBtn,
	lastBtn: lastBtn,
	});

	var currentElements = paginator.currentElements;
	var currentPage = paginator.currentPage;
	var lastPage = paginator.lastPage;
	var pageInfo = paginator.getCurrentPageInfo(({count, curr, last}) => `${count} items \| Page ${curr} of ${last}`);
	};
	</script>

	</html>