// https://observablehq.com/@observablehq/introduction-to-views viewof testlims = { const pages = Math.ceil(data.length / page_settings.rowsPerPage); const element = html`

${Array.from({ length: pages }).map( (_, i) => { let thisClass = i === 0 ? "btnactive" : "pgbtn" return html``; } )}

`; element.value = [0, 13]; element.onclick = (d) => { const prevClicked = d3.select(".btnactive").attr("id"); const nowClicked = d.target.id; // Get action label from button div let thisAction = d3.select(`#${d.target.id}`).attr("action"); // Handle Previous and Next buttons separately if (thisAction === "page") { if (nowClicked === prevClicked) { return; } else { console.log("display new page") // Page clicked let thisPg = parseInt(d.target.id.split("pg")[1]); // Define starting row of data array for selected page let lim0 = thisPg * (page_settings.rowsPerPage + 1); // Define end row of data array for selected page. If end row // is > length of array, stop at length of array. let lim1 = (lim0 + page_settings.rowsPerPage) > data.length ? data.length : lim0 + page_settings.rowsPerPage; // Assign row limits to returned array element.value = [lim0, lim1]; } } else if (thisAction === "last") { const lastPg = Math.ceil(data.length / page_settings.rowsPerPage) - 1; const lim0 = lastPg * (page_settings.rowsPerPage + 1); const lim1 = (lim0 + page_settings.rowsPerPage) > data.length ? data.length : lim0 + page_settings.rowsPerPage; // Assign last page row limits to returned array element.value = [lim0, lim1]; } element.dispatchEvent(new Event("input", {bubbles: true})); }; return element; }