working on tables functionality

apps/home/static/home/js/tables.js

@@ -1,5 +1,7 @@
 
-function initializeDataTable(tableId, apiUrl, columns) {
+// region Init Table
+
+function initializeDataTable(tableId, columns) {
     $(tableId).DataTable({
         info: false,
         paging: false,
@@ -35,6 +37,41 @@ function initializeDataTable(tableId, apiUrl, columns) {
     });
 }
 
+
+// region Filters & Ordering
+
+// Filter methods
+var _tableFilters = {};
+function getTableFilters(tableId) {
+    return _tableFilters[tableId];
+}
+
+function setTableFilter(tableId, key, value) {
+    if (!_tableFilters[tableId]) {
+        _tableFilters[tableId] = {};
+    }
+
+    _tableFilters[tableId][key] = value;
+}
+
+// Sort methods
+var _tableOrdering = {};
+function getTableOrdering(tableId) {
+    return _tableOrdering[tableId];
+}
+
+function setTableOrdering(tableId, value) {
+    _tableOrdering[tableId] = value;
+}
+
+$(document).on("selectedServerChange", function() {
+    _tableFilters = {};
+    _tableOrdering = {};
+});
+
+
+// region Data Control
+
 function wipeTable(tableId) {
     $(`${tableId} thead .table-select-all`).prop("checked", false).prop("indeterminate", false);
     $(tableId).DataTable().clear().draw(false)
@@ -44,6 +81,25 @@ function populateTable(tableId, data) {
     $(tableId).DataTable().rows.add(data.results).draw(false);
 }
 
-async function loadData(tableId, loadFunc) {
-    
+async function loadTableData(tableId, url, method) {
+    // Create querystring for filtering against the API
+    let filters = getTableFilters(tableId);
+    let ordering = getTableOrdering(tableId);
+    let querystring = makeQuerystring(filters, ordering);
+
+    // API request
+    let data = await ajaxRequest(url + querystring, method);
+
+    // Update table with new data
+    wipeTable(tableId);
+    populateTable(tableId, data);
 }
+
+// region Pagination
+
+function bindTablePagination(tableId) {  // TODO:
+    let $paginationArea = $(tableId).parent().find(".table-pagination .pagination")
+    $paginationArea.on("click", ".page-link", function() {
+
+    });
+}

apps/home/static/home/js/tabs/subs.js

@@ -6,7 +6,6 @@ const subTableId = "#subTable";
 function initSubscriptionsModule() {
     initializeDataTable(
         "#subTable",
-        null,
         [
             {
                 title: "Name",
@@ -96,14 +95,17 @@ $(document).on("selectedServerChange", async function() {
     await loadSubscriptionData();
 });
 
+$(document).on("doLoadSubscriptions", async function() {
+    await loadSubscriptionData();
+})
+
 async function loadSubscriptionData() {
     if (!selectedServer) {
         return;
     }
 
-    let data = await getSubscriptions(selectedServer.id);
-    wipeTable(subTableId);
-    populateTable(subTableId, data);
+    setTableFilter(subTableId, "server", selectedServer.id);
+    await loadTableData(subTableId, `/api/subscriptions/`, "GET");
 }
 
 // #endregion