Implemented pagination, refactored links function and added comments.

Author: LegendaryFire

django_responsive_tables2/static/django_responsive_tables2/tables.js

@@ -1,18 +1,18 @@
-function updateHeaders(tableId, url, tableElement) {
-    // Get the column header elements.
-    headerElements = tableElement.getElementsByTagName('TH');
-    for (let x = 0; x < headerElements.length; x++) {
-        const headerLinks = headerElements[x].getElementsByTagName('A');
-        for (let y = 0; y < headerLinks.length; y++) {
-            headerLinks[y].onclick = function(e) {
+/** Updates the specified tables related links. */
+function updateLinks(tableId, url, elements) {
+    for (let x = 0; x < elements.length; x++) {
+        const links = elements[x].getElementsByTagName('A');
+        for (let y = 0; y < links.length; y++) {
+            links[y].onclick = function(e) {
                 e.preventDefault();
-                url = buildUrl(url, decodeParameters(headerLinks[y].getAttribute('href')));
+                url = buildUrl(url, decodeParameters(links[y].getAttribute('href')));
                 updateTable(tableId, url);
             };
         }
     }
 }
 
+/** Updates the specified table and submits search queries. */
 function updateTable(tableId, url, search=null) {
     const xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function() {
@@ -21,10 +21,19 @@ function updateTable(tableId, url, search=null) {
                 // Replace the existing table with the table fetched from the request.
                 var tableElement = document.getElementById(tableId);
                 tableElement.innerHTML = xhr.responseText;
-                updateHeaders(tableId, url, tableElement);
+
+                // Update header column sort links.
+                const headerElements = tableElement.getElementsByTagName('TH');
+                updateLinks(tableId, url, headerElements);
+
+                // Update page links.
+                const paginationElements = tableElement.getElementsByTagName('pagination');
+                updateLinks(tableId, url, paginationElements);
             }
         }
     };
+
+    // If there is a search, add search parameters to our AJAX call.
     if (search) {
         let searchParam = {"search": search};
         url = buildUrl(url, searchParam);
@@ -33,6 +42,7 @@ function updateTable(tableId, url, search=null) {
     xhr.send();
 }
 
+/** Encodes a dictionary to a URL parameter string. */
 function encodeParameters(params) {
     let result = '?';
     for (let i = 0; i < Object.keys(params).length; i++) {
@@ -45,13 +55,15 @@ function encodeParameters(params) {
     return result;
 }
 
+/** Gets a dictionary of parameters from a given URL. */
 function decodeParameters(url) {
     let result = {};
     let parameters = url.split("?");
-    // If no question mark was found, there were no parameters.
+    // No question mark, no parameters.
     if (parameters.length <= 1) return { };
     else parameters = parameters[1];
     parameters = parameters.split("&");
+    // Iterate through each parameter key and value.
     for (i in parameters) {
         pair = parameters[i].split("=");
         if (pair.length == 2) {
@@ -63,19 +75,19 @@ function decodeParameters(url) {
     return result;
 }
 
+/** Removes all parameters from a given URL. */
 function clearParameters(url) {
     split = url.split("?");
     if (split.length > 1) return split[0];
     else return url;
 }
 
+//** Appends parameters to a given URL. */
 function buildUrl(url, params, keep_params=true) {
     let new_params = { };
     if (keep_params==true) new_params = decodeParameters(url);
-
     for (const [key, value] of Object.entries(params)) {
         new_params[key] = value;
     }
-
     return clearParameters(url) + encodeParameters(new_params);
 }