current page

resources/app/stylesheets/app.less

@@ -248,7 +248,11 @@ table {
 }
 
 .tbl-toolbar {
-    text-align: right;
+    display: flex;
+
+    .curr-page {
+        flex-grow: 99;
+    }
 
     .prev::before {
         content: "<< ";

resources/public/js/scripts.js

@@ -57,15 +57,28 @@ document.addEventListener('DOMContentLoaded', function () {
             })
         }
 
+        function setCurrPage(tbl, currPageIx) {
+            const elems = document.querySelectorAll('.tbl-toolbar .curr-page')
+            const rows = tbl.tBodies[0].rows.length
+            const pages = Math.ceil(rows / pageSize)
+
+            elems.forEach(function(elem) {
+                elem.innerText = (currPageIx + 1) + ' / ' + pages + ' (' + rows + ' rows)'
+            })
+        }
+
         function prevButton(tbl) {
             const btn = document.createElement('button')
             btn.classList.add('prev')
             btn.innerText = 'Prev'
             btn.addEventListener('click', function () {
                 const page = tbl.getAttribute('data-page') * 1
+
                 if (page > 0) {
-                    tbl.setAttribute('data-page', page - 1)
-                    toggleVisibilities(tbl, visibleRows(page - 1))
+                    const newPageIx = page - 1
+                    tbl.setAttribute('data-page', newPageIx)
+                    toggleVisibilities(tbl, visibleRows(newPageIx))
+                    setCurrPage(tbl, newPageIx)
                 }
             })
             return btn;
@@ -78,22 +91,34 @@ document.addEventListener('DOMContentLoaded', function () {
             btn.addEventListener('click', function () {
                 const page = tbl.getAttribute('data-page') * 1
                 const lastRowNum = (page + 1) * pageSize
+
                 if (lastRowNum < tbl.tBodies[0].rows.length) {
-                    tbl.setAttribute('data-page', page + 1)
-                    toggleVisibilities(tbl, visibleRows(page + 1))
+                    const newPageIx = page + 1
+                    tbl.setAttribute('data-page', newPageIx)
+                    toggleVisibilities(tbl, visibleRows(newPageIx))
+                    setCurrPage(tbl, newPageIx)
                 }
             })
             return btn
         }
 
+        function currPage() {
+            const span = document.createElement('span')
+            span.classList.add('curr-page')
+            span.innerText = 1
+            return span
+        }
+
         function addToolbar(tbl) {
             const toolbarTop = document.createElement('section')
             toolbarTop.classList.add('tbl-toolbar')
+            toolbarTop.insertAdjacentElement('beforeend', currPage())
             toolbarTop.insertAdjacentElement('beforeend', prevButton(tbl))
             toolbarTop.insertAdjacentElement('beforeend', nextButton(tbl))
 
             const toolbarBottom = document.createElement('section')
             toolbarBottom.classList.add('tbl-toolbar')
+            toolbarBottom.insertAdjacentElement('beforeend', currPage())
             toolbarBottom.insertAdjacentElement('beforeend', prevButton(tbl))
             toolbarBottom.insertAdjacentElement('beforeend', nextButton(tbl))
 
@@ -105,6 +130,7 @@ document.addEventListener('DOMContentLoaded', function () {
             toggleVisibilities(tbl, visibleRows(0))
             tbl.setAttribute('data-page', 0)
             addToolbar(tbl)
+            setCurrPage(tbl, 0)
         })
     }