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

@@ -43,24 +43,62 @@ document.addEventListener('DOMContentLoaded', function() {
     })
 
     function dynamicTables() {
+        const pageSize = 25
+
         const range = (x, y) =>
             x > y ? [] : [x, ...range(x + 1, y)];
-
-        const pageSize = 50
-        const colsFromThead = thead =>
-              [...thead.children[0].children].map(th => th.innerText)
         const visibleRows = page =>
             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) {
-            const thead = tbl.tHead
-            const tbody = tbl.tBodies[0]
-            const cols = colsFromThead(thead)
-            const rows = [...tbl.rows]
-            let page = 0
-            console.debug(visibleRows(1))
+            toggleVisibilities(tbl, visibleRows(0))
+            tbl.setAttribute('data-page', 0)
+            addToolbar(tbl)
         })
     }
+
     dynamicTables()
 })