add fancy js fuck

resources/public/js/scripts.js

@@ -1,44 +1,58 @@
 document.addEventListener('DOMContentLoaded', function() {
-  function label(element, value) {
-    if(element.hasAttribute('value')) {
-      if(value !== undefined) {
-        element.setAttribute('value', value)
-      } else {
-        return element.getAttribute('value')
-      }
-    } else {
-      if(value !== undefined) {
-        element.textContent = value
-      } else {
-        return element.textContent
-      }
+    function label(element, value) {
+	if(element.hasAttribute('value')) {
+	    if(value !== undefined) {
+		element.setAttribute('value', value)
+	    } else {
+		return element.getAttribute('value')
+	    }
+	} else {
+	    if(value !== undefined) {
+		element.textContent = value
+	    } else {
+		return element.textContent
+	    }
+	}
     }
-  }
 
-  function countdownDeleteButton(event) {
-    const btn = event.target
-    const countdown = btn.getAttribute('data-countdown')
+    function countdownDeleteButton(event) {
+	const btn = event.target
+	const countdown = btn.getAttribute('data-countdown')
 
-    if(countdown != 1) {
-      event.preventDefault()
-      btn.classList.add('__on-countdown')
+	if(countdown != 1) {
+	    event.preventDefault()
+	    btn.classList.add('__on-countdown')
 
-      const hasCountdown = countdown !== null
-      const newCountdown = hasCountdown ? countdown - 1 : 3
+	    const hasCountdown = countdown !== null
+	    const newCountdown = hasCountdown ? countdown - 1 : 3
 
-      if(!hasCountdown) {
-        btn.setAttribute('data-label', label(btn))
-      }
+	    if(!hasCountdown) {
+		btn.setAttribute('data-label', label(btn))
+	    }
 
-      label(btn, newCountdown)
-      btn.setAttribute('data-countdown', newCountdown)
-      setTimeout(countdownDeleteButton, 1000, event)
-    } else {
-      label(btn, btn.getAttribute('data-label'))
+	    label(btn, newCountdown)
+	    btn.setAttribute('data-countdown', newCountdown)
+	    setTimeout(countdownDeleteButton, 1000, event)
+	} else {
+	    label(btn, btn.getAttribute('data-label'))
+	}
     }
-  }
 
-  document.querySelectorAll('.delete-btn').forEach(function(btn) {
-    btn.addEventListener('click', countdownDeleteButton)
-  })
+    document.querySelectorAll('.delete-btn').forEach(function(btn) {
+	btn.addEventListener('click', countdownDeleteButton)
+    })
+})
+
+$(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,9 +45,12 @@
       [: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/app.css")
+      (include-css "/css/datatables.min.css"
+                   "/css/app.css")
       (when devmode? (include-css "/css/devmode.css"))
-      (include-js "/js/scripts.js")
+      (include-js "/js/jquery-3.3.1.slim.min.js"
+                  "/js/datatables.min.js"
+                  "/js/scripts.js")
       head]
      [:body
       [:section.grid