basic pagination

resources/app/stylesheets/app.less

@@ -221,23 +221,22 @@ table {
     margin-top: 1rem;
     margin-bottom: 1rem;
 
-    td, th {
-        border-bottom: @border-stack;
-        padding: @text-padding-v * 2 @text-padding-h / 2h;
-    }
-
     thead {
         position: sticky;
         top: 0;
         background-color: @body-background-color;
 
         th {
-            padding: @text-padding-v @text-padding-h;
-            border-bottom: @accent-border-width / 5 solid @ci-color;
+            padding: @text-padding-v @text-padding-h @text-padding-v + .3rem @text-padding-v;
         }
     }
 
     tbody {
+        td {
+            border-bottom: @border-stack;
+            padding: @text-padding-v * 2 @text-padding-h / 2h;
+        }
+
         input[type=submit] {
             margin-bottom: 0;
         }

resources/public/js/scripts.js

@@ -1,13 +1,13 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     function label(element, value) {
-        if(element.hasAttribute('value')) {
-            if(value !== undefined) {
+        if (element.hasAttribute('value')) {
+            if (value !== undefined) {
                 element.setAttribute('value', value)
             } else {
                 return element.getAttribute('value')
             }
         } else {
-            if(value !== undefined) {
+            if (value !== undefined) {
                 element.textContent = value
             } else {
                 return element.textContent
@@ -19,14 +19,14 @@ document.addEventListener('DOMContentLoaded', function() {
         const btn = event.target
         const countdown = btn.getAttribute('data-countdown')
 
-        if(countdown !== '1') {
+        if (countdown !== '1') {
             event.preventDefault()
             btn.classList.add('__on-countdown')
 
             const hasCountdown = countdown !== null
             const newCountdown = hasCountdown ? countdown - 1 : 3
 
-            if(!hasCountdown) {
+            if (!hasCountdown) {
                 btn.setAttribute('data-label', label(btn))
             }
 
@@ -38,29 +38,67 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
 
-    document.querySelectorAll('.delete-btn').forEach(function(btn) {
+    document.querySelectorAll('.delete-btn').forEach(function (btn) {
         btn.addEventListener('click', countdownDeleteButton)
     })
 
     function dynamicTables() {
-        const range = (x,y) =>
-              x > y ? [] : [x, ...range(x + 1, y)];
+        const pageSize = 25
 
-        const pageSize = 50
-        const colsFromThead = thead =>
-              [...thead.children[0].children].map(th => th.innerText)
+        const range = (x, y) =>
+            x > y ? [] : [x, ...range(x + 1, y)];
         const visibleRows = page =>
-              range(page * pageSize, (page + 1) * pageSize - 1)
-
-        document.querySelectorAll('table').forEach(function(tbl) {
-            const thead = tbl.tHead
-            const tbody = tbl.tBodies[0]
-            const cols = colsFromThead(thead)
-            const rows = [...tbl.rows]
-            let page = 0
-            console.debug(visibleRows(1))
+            range(page * pageSize, (page + 1) * pageSize - 1)
+
+        function toggleVisibilities(tbl, ixsToShow) {
+            const rows = [...tbl.tBodies[0].rows]
+            rows.forEach(function (row, ix) {
+                row.style.display = ixsToShow.includes(ix) ? 'table-row' : 'none';
+            })
+        }
+
+        function prevClick(tbl) {
+            const page = tbl.getAttribute('data-page') * 1
+            tbl.setAttribute('data-page', page - 1)
+            toggleVisibilities(tbl, visibleRows(page - 1))
+        }
+
+        function nextClick(tbl) {
+            const page = tbl.getAttribute('data-page') * 1
+            tbl.setAttribute('data-page', page + 1)
+            toggleVisibilities(tbl, visibleRows(page + 1))
+        }
+
+        function addToolbar(tbl) {
+            const toolbar = document.createElement('section')
+            toolbar.classList.add('tbl-toolbar')
+
+            const prevBtn = document.createElement('button')
+            prevBtn.classList.add('prev')
+            prevBtn.innerText = 'Prev'
+            prevBtn.addEventListener('click', function () {
+                prevClick(tbl)
+            })
+            toolbar.insertAdjacentElement('beforeend', prevBtn)
+
+            const nextBtn = document.createElement('button')
+            nextBtn.classList.add('next')
+            nextBtn.innerText = 'Next'
+            nextBtn.addEventListener('click', function () {
+                nextClick(tbl)
+            })
+            toolbar.insertAdjacentElement('beforeend', nextBtn)
+
+            tbl.insertAdjacentElement('afterend', toolbar)
+        }
+
+        document.querySelectorAll('table').forEach(function (tbl) {
+            toggleVisibilities(tbl, visibleRows(0))
+            tbl.setAttribute('data-page', 0)
+            addToolbar(tbl)
         })
     }
+
     dynamicTables()
 })