Merge pull request #40 from jan-vitek/master

Extend url query params with perPage and sorting

Author: Trekky12

src/jstable.js

@@ -65,7 +65,10 @@ const JSTableDefaultConfig = {
     // query params names
     queryParams: {
         page: 'page',
-        search: 'search'
+        search: 'search',
+        sortColumn: 'sortColumn',
+        sortDirection: 'sortDirection',
+        perPage: 'perPage'
     },
     // append query params on events
     addQueryParams: true,
@@ -566,6 +569,14 @@ class JSTable {
         });
     }
 
+    _setQueryParam(key, value) {
+      if (!this.config.addQueryParams) return;
+
+      const url = new URL(window.location.href);
+      url.searchParams.set(this.config.queryParams[key], value);
+      window.history.replaceState(null, null, url);
+    }
+
     _bindEvents() {
         var that = this;
 
@@ -578,11 +589,7 @@ class JSTable {
                 let new_page = parseInt(node.getAttribute("data-page"), 10);
                 that.paginate(new_page);
 
-                if (that.config.addQueryParams) {
-                    const url = new URL(window.location.href);
-                    url.searchParams.set(that.config.queryParams.page, new_page);
-                    window.history.replaceState(null, null, url);
-                }
+                that._setQueryParam('page', new_page)
             }
 
             if (node.nodeName === "TH" && node.hasAttribute("data-sortable")) {
@@ -591,7 +598,11 @@ class JSTable {
                     return false;
 
                 event.preventDefault();
-                that.sort(node.cellIndex, node.classList.contains("asc") ? "desc" : "asc");
+                let sortDirection = node.classList.contains("asc") ? "desc" : "asc";
+                that.sort(node.cellIndex, sortDirection);
+
+                that._setQueryParam('sortColumn', node.cellIndex)
+                that._setQueryParam('sortDirection', sortDirection)
             }
         });
 
@@ -604,6 +615,8 @@ class JSTable {
                     that._emit("perPageChange", that.config.perPage, value);
                     that.config.perPage = value;
                     that.update();
+
+                    that._setQueryParam('perPage', value)
                 }
             });
         }
@@ -614,11 +627,7 @@ class JSTable {
                     e.preventDefault();
                     that.search(e.target.value);
 
-                    if (that.config.addQueryParams) {
-                        const url = new URL(window.location.href);
-                        url.searchParams.set(that.config.queryParams.search, e.target.value);
-                        window.history.replaceState(null, null, url);
-                    }
+                    that._setQueryParam('search', e.target.value)
                 }
             });
         }
@@ -795,7 +804,20 @@ class JSTable {
 
     async _parseQueryParams() {
         const urlParams = new URLSearchParams(window.location.search);
-        
+
+        let perPage = urlParams.get(this.config.queryParams.perPage);
+        if (perPage) {
+          perPage = parseInt(perPage)
+          this.config.perPage = perPage;
+          let selectors = this.wrapper.querySelectorAll('.' + this.config.classes.selector);
+          selectors.forEach(function (selector) {
+            selector.querySelectorAll('option').forEach(opt => opt.removeAttribute('selected'))
+            selector.value = perPage;
+            selector.querySelector(`option[value='${perPage}']`).setAttribute('selected', '')
+          });
+          this.update()
+        }
+
         // parse search param and populate search
         let search = urlParams.get(this.config.queryParams.search);
         if (search) {
@@ -811,6 +833,14 @@ class JSTable {
         if (page) {
             await this.paginate(parseInt(page));
         }
+
+        let sortColumn = urlParams.get(this.config.queryParams.sortColumn);
+        if (sortColumn) {
+          sortColumn = parseInt(sortColumn)
+          let sortDirection = urlParams.get(this.config.queryParams.sortDirection);
+          sortDirection = (sortDirection == undefined) ? "asc" : sortDirection;
+          this.sort(sortColumn, sortDirection);
+        }
     }
 }