remove datatables, more butiful pagination

resources/app/stylesheets/app.less

@@ -246,3 +246,19 @@ table {
         }
     }
 }
+
+.tbl-toolbar {
+    text-align: right;
+
+    .prev::before {
+        content: "<< ";
+    }
+
+    .next::after {
+        content: " >>";
+    }
+
+    button {
+        margin-right: @element-margin;
+    }
+}

resources/public/js/scripts.js

@@ -57,39 +57,48 @@ document.addEventListener('DOMContentLoaded', function () {
             })
         }
 
-        function prevClick(tbl) {
+        function prevButton(tbl) {
-            const page = tbl.getAttribute('data-page') * 1
+            const btn = document.createElement('button')
-            tbl.setAttribute('data-page', page - 1)
+            btn.classList.add('prev')
-            toggleVisibilities(tbl, visibleRows(page - 1))
+            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))
+                }
+            })
+            return btn;
         }
 
-        function nextClick(tbl) {
+        function nextButton(tbl) {
-            const page = tbl.getAttribute('data-page') * 1
+            const btn = document.createElement('button')
-            tbl.setAttribute('data-page', page + 1)
+            btn.classList.add('next')
-            toggleVisibilities(tbl, visibleRows(page + 1))
+            btn.innerText = 'Next'
+            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))
+                }
+            })
+            return btn
         }
 
         function addToolbar(tbl) {
-            const toolbar = document.createElement('section')
+            const toolbarTop = document.createElement('section')
-            toolbar.classList.add('tbl-toolbar')
+            toolbarTop.classList.add('tbl-toolbar')
-
+            toolbarTop.insertAdjacentElement('beforeend', prevButton(tbl))
-            const prevBtn = document.createElement('button')
+            toolbarTop.insertAdjacentElement('beforeend', nextButton(tbl))
-            prevBtn.classList.add('prev')
+
-            prevBtn.innerText = 'Prev'
+            const toolbarBottom = document.createElement('section')
-            prevBtn.addEventListener('click', function () {
+            toolbarBottom.classList.add('tbl-toolbar')
-                prevClick(tbl)
+            toolbarBottom.insertAdjacentElement('beforeend', prevButton(tbl))
-            })
+            toolbarBottom.insertAdjacentElement('beforeend', nextButton(tbl))
-            toolbar.insertAdjacentElement('beforeend', prevBtn)
+
-
+            tbl.insertAdjacentElement('afterend', toolbarTop)
-            const nextBtn = document.createElement('button')
+            tbl.insertAdjacentElement('beforebegin', toolbarBottom)
-            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) {
@@ -101,19 +110,3 @@ document.addEventListener('DOMContentLoaded', function () {
 
     dynamicTables()
 })
-
-/*
-  $(document).ready(function() {
-  $('table').DataTable({
-  stateSave: true,
-  fixedHeader: true,
-  lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
-  stateSaveCallback: function(settings,data) {
-  localStorage.setItem('DataTables', JSON.stringify(data))
-  },
-  stateLoadCallback: function(settings) {
-  return JSON.parse(localStorage.getItem('DataTables'))
-  }
-  })
-  })
-*/

src/wanijo/framework/view.clj

@@ -45,12 +45,9 @@
       [:meta {:name "viewport"
               :content "width=device-width,initial-scale=1,shrink-to-fit=no"}]
       [:title (str "wan ijo" (when title (str " - " title)))]
-      (include-css "/css/datatables.min.css"
+      (include-css "/css/app.css")
-                   "/css/app.css")
       (when devmode? (include-css "/css/devmode.css"))
-      (include-js "/js/jquery-3.3.1.slim.min.js"
+      (include-js "/js/scripts.js")
-                  "/js/datatables.min.js"
-                  "/js/scripts.js")
       head]
      [:body
       [:section.grid