Update datatables

package.json

@@ -36,12 +36,12 @@
     "chartjs-adapter-moment": "1.0.1",
     "chartjs-plugin-deferred": "2.0.0",
     "chartjs-plugin-zoom": "2.2.0",
-    "datatables.net": "2.3.8",
-    "datatables.net-bs5": "2.3.8",
-    "datatables.net-buttons": "3.2.6",
-    "datatables.net-buttons-bs5": "3.2.6",
-    "datatables.net-select": "3.1.3",
-    "datatables.net-select-bs5": "3.1.3",
+    "datatables.net": "3.0.1",
+    "datatables.net-bs5": "3.0.1",
+    "datatables.net-buttons": "4.0.1",
+    "datatables.net-buttons-bs5": "4.0.1",
+    "datatables.net-select": "4.0.0",
+    "datatables.net-select-bs5": "4.0.0",
     "daterangepicker": "3.1.0",
     "hammerjs": "2.0.8",
     "jquery": "3.7.1",

scripts/js/groups-clients.js

@@ -11,6 +11,7 @@
 "use strict";
 
 let table;
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 function reloadClientSuggestions() {
   $.ajax({
@@ -107,6 +108,7 @@ function initTable() {
       url: document.body.dataset.apiurl + "/clients",
       dataSrc: "clients",
       type: "GET",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/groups-domains.js

@@ -12,6 +12,7 @@
 
 let table;
 let GETDict = {};
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 $(() => {
   GETDict = utils.parseQueryString();
@@ -105,6 +106,7 @@ function initTable() {
       url: document.body.dataset.apiurl + "/domains",
       dataSrc: "domains",
       type: "GET",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/groups-lists.js

@@ -12,6 +12,7 @@
 
 let table;
 let GETDict = {};
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 $(() => {
   GETDict = utils.parseQueryString();
@@ -176,6 +177,7 @@ function initTable() {
       url: document.body.dataset.apiurl + "/lists",
       dataSrc: "lists",
       type: "GET",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/groups.js

@@ -10,6 +10,7 @@
 "use strict";
 
 let table;
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 function handleAjaxError(xhr, textStatus) {
   if (textStatus === "timeout") {
@@ -32,6 +33,7 @@ $(() => {
       error: handleAjaxError,
       dataSrc: "groups",
       type: "GET",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/messages.js

@@ -11,6 +11,7 @@
 
 let table;
 const toasts = {};
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 $(() => {
   const url = document.body.dataset.apiurl + "/info/messages";
@@ -19,6 +20,7 @@ $(() => {
       url,
       type: "GET",
       dataSrc: "messages",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[0, "asc"]],
     columns: [

scripts/js/network.js

@@ -10,6 +10,7 @@
 "use strict";
 
 let tableApi;
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 // How many IPs do we show at most per device?
 const MAXIPDISPLAY = 3;
@@ -217,6 +218,7 @@ $(() => {
       url: document.body.dataset.apiurl + "/network/devices",
       type: "GET",
       dataType: "json",
+      headers: { "X-CSRF-TOKEN": csrfToken },
       data: {
         max_devices: 999,
         max_addresses: 25,

scripts/js/queries.js

@@ -9,6 +9,8 @@
 
 "use strict";
 
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+
 // These values are provided by the API
 // We initialize them as null and populate them during page init.
 let beginningOfTime = null; // seconds since epoch
@@ -592,6 +594,7 @@ $(() => {
       url: apiURL,
       error: handleAjaxError,
       dataSrc: "queries",
+      headers: { "X-CSRF-TOKEN": csrfToken },
       data(d) {
         if (cursor !== null) {
           d.cursor = cursor;
@@ -730,9 +733,8 @@ $(() => {
         .columns()
         .every(function () {
           // Skip columns that are not searchable
-          const colIdx = this.index();
-          const bSearchable = this.context[0].aoColumns[colIdx].bSearchable;
-          if (!bSearchable) {
+          const searchable = this.init().searchable ?? true;
+          if (!searchable) {
             return null;
           }
 

scripts/js/settings-api.js

@@ -14,6 +14,7 @@ let ownSessionID = null;
 let deleted = 0;
 let TOTPdata = null;
 let apppwSet = false;
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 function renderBool(data, type) {
   // Display and search content
@@ -36,6 +37,7 @@ $(() => {
       url: document.body.dataset.apiurl + "/auth/sessions",
       type: "GET",
       dataSrc: "sessions",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[1, "asc"]],
     columns: [

scripts/js/settings-dhcp.js

@@ -11,6 +11,7 @@
 
 let dhcpLeaesTable = null;
 const toasts = {};
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 // DHCP leases tooltips
 // Bootstrap 5 has no jQuery-plugin tooltip delegation, so lazily instantiate
@@ -50,6 +51,7 @@ $(() => {
       url: document.body.dataset.apiurl + "/dhcp/leases",
       type: "GET",
       dataSrc: "leases",
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     order: [[1, "asc"]],
     columns: [

scripts/js/settings-dns-records.js

@@ -8,6 +8,7 @@
 /* global utils: false, apiFailure:false, setConfigValues: false */
 
 "use strict";
+const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
 
 function hostsDomain(data) {
   // Split record in format IP NAME1 [NAME2 [NAME3 [NAME...]]]
@@ -82,6 +83,7 @@ function populateDataTable(endpoint) {
       url: document.body.dataset.apiurl + "/config/dns/" + endpoint,
       type: "GET",
       dataSrc: `config.dns.${endpoint}`,
+      headers: { "X-CSRF-TOKEN": csrfToken },
     },
     autoWidth: false,
     columns,