added ajax functionality for pagination

templates/table/colonnade.lucius

@@ -1,7 +1,14 @@
 table th {
-  cursor: pointer;
   position: relative;
   padding-right: 20px;
+
+  &.sortable {
+    cursor: pointer;
+  }
+
+  a {
+    font-weight: 800;
+  }
 }
 
 table th.sorted-asc,

templates/table/layout.cassius

@@ -1,14 +0,0 @@
-ul.paginationLinks
-  list-style: none outside none
-  margin: 0
-  padding: 0
-  text-align: center
-  li
-    margin: 0
-    margin-right: .25em
-    padding: 0
-    display: inline-block
-    .current
-      text-decoration: underline
-  li:last-child
-    margin-right: 0

templates/table/layout.hamlet

@@ -3,11 +3,8 @@ $newline never
   <div .scrolltable>
     ^{table}
   $if pageCount > 1
-    <ul .paginationLinks>
+    <ul ##{dbtIdent}-pagination .pagination>
       $forall p <- pageNumbers
-        <li>
+        <li .pagination-link :p == psPage:.current>
-          $if p == psPage
+          <a href=#{tblLink $ setParam (wIdent "page") (Just $ tshow p)}>
-            <span .current>_{MsgPage (succ p)}
+            _{MsgPage (succ p)}
-          $else
-            <a href=#{tblLink $ setParam (wIdent "page") (Just $ tshow p)}>
-              _{MsgPage (succ p)}

templates/table/layout.julius

@@ -6,43 +6,37 @@
     var ASC = 'asc';
     var DESC = 'desc';
 
-    function setupSorting(wrapper) {
+    function setupAsync(wrapper) {
 
-      var table = wrapper.querySelector('#' + #{String $ wIdent "table-only"}.replace('-table-only', ''));
+      var table = wrapper.querySelector('#' + #{String $ dbtIdent});
-      var ths = Array.from(table.querySelectorAll('th'));
+      var ths = Array.from(table.querySelectorAll('th.sortable'));
+      if (ths) {
+        // attach click handler to each sortable column if any
+        ths.forEach(function(th) {
+          th.addEventListener('click', clickHandler);
+        });
+      }
 
-      // attach click handler to each table-header
+      var pagination = wrapper.querySelector('#' + #{String $ dbtIdent} + '-pagination');
-      ths.forEach(function(th) {
+      if (pagination) {
-        th.addEventListener('click', clickHandler);
+        var paginationLinks = Array.from(pagination.querySelectorAll('.pagination-link'));
-      });
+        // attach click handler to pagination links if any
+        paginationLinks.forEach(function(p) {
+          p.addEventListener('click', clickHandler);
+        });
+      }
 
-      // handles click on table header
       function clickHandler(event) {
         event.preventDefault();
-        var link = this.querySelector('a');
+        var url = new URL(window.location.origin + window.location.pathname + getClickDestination(this));
-        // abort if there is no link set for this column
-        if (!link) {
-          return false;
-        }
-        var href = link.getAttribute('href');
-        var url = new URL(window.location.origin + window.location.pathname + href);
-        var order = this.dataset.order || ASC;
         url.searchParams.set(#{String $ wIdent "table-only"}, 'yes');
         updateTableFrom(url);
-        markAsSorted(this, order);
       }
 
-      function markAsSorted(th, order) {
+      function getClickDestination(el) {
-        ths.forEach(function(th) {
+        var link = el.querySelector('a');
-          th.classList.remove('sorted-asc', 'sorted-desc');
+        if (!link) { return false; }
-        });
+        return link.getAttribute('href');
-        th.classList.add('sorted-' + order);
-        th.dataset.order = order;
-      }
-
-      function replaceContent(content) {
-        wrapper.innerHTML = content;
-        setupSorting(wrapper);
       }
 
       // fetches new sorted table from url with params and replaces contents of current table
@@ -60,7 +54,9 @@
           return response.text();
         }).then(function(data) {
           // replace contents of table body
-          replaceContent(data);
+          wrapper.innerHTML = data;
+          // set up async functionality again
+          setupAsync(wrapper);
           table.querySelector('tbody').innerHTML = data;
         }).catch(function(err) {
           console.error(err);
@@ -69,6 +65,6 @@
     }
 
     var selector = '#' + #{String $ dbtIdent} + '-table-wrapper';
-    setupSorting(document.querySelector(selector));
+    setupAsync(document.querySelector(selector));
   });
 })();

templates/table/layout.lucius

@@ -0,0 +1,38 @@
+.pagination {
+  margin-top: 20px;
+  text-align: center;
+
+  .pagination-link {
+    margin: 0 7px;
+    display: inline-block;
+    background-color: var(--greybase);
+
+    a {
+      color: var(--whitebase);
+      padding: 7px 13px;
+      display: inline-block;
+    }
+
+    &:not(.current):hover {
+      background-color: var(--lighterbase);
+
+      a {
+        color: var(--whitebase);
+      }
+    }
+
+    &.current {
+      pointer-events: none;
+      background-color: var(--lightbase);
+
+      a {
+        text-decoration: underline;
+        pointer-events: none;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}