Added basic single-button action columns

resources/css/datatables.css

@@ -37,3 +37,19 @@ body {
     background-color: white; /* even rows */
 }
 
+.action-button {
+    display: inline-block;
+    padding: 6px 12px;
+    background-color: grey;
+    color: black;
+    border: none;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.action-button:hover {
+    background-color: darkgrey;
+}
+

resources/js/datatables.js

@@ -14,20 +14,69 @@ import 'datatables.net-responsive-dt';
 
 
 
+
 // Ensure jQuery is available globally
 window.$ = window.jQuery = $;
 window.JSZip = JSZip;
 // Initialize DataTable
-let dataTableInstance;
+var dataTableInstance;
 var searchTerms ={};
 function initializeDataTable() {
     var dataTableName = document.getElementById('datatable-config').dataset.datatableName;
     var dataTableColumnsConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableColumnsConfig);
     var dataTableHeadersConfig = JSON.parse(document.getElementById('datatable-config').dataset.datatableHeadersConfig);
-    if ($.fn.DataTable.isDataTable(`#${dataTableName}-table`)) {
-        dataTableInstance.destroy();
-        $(`#${dataTableName}-table tbody`).empty(); // Clear rows to prevent residue
+
+
+    //Set up any action columns
+    function doActionButton(url, id)
+    {
+        window.open(url, "_blank");
     }
+    window.doActionButton=doActionButton;
+
+    var renderFunctions = [];
+    dataTableHeadersConfig.forEach(function (headerColumn, columnIndex){
+        if(headerColumn.type === "action")
+        {
+            let buttonUrl = dataTableColumnsConfig[columnIndex].buttonUrl;
+            let parameters = dataTableColumnsConfig[columnIndex].querystring_parameters;
+            console.log(parameters);
+            let renderBody = `if (type === "display") {console.log(row);`;
+            renderBody += `return '<button class="action-button" onclick="doActionButton(`;
+            renderBody += `\\'`+buttonUrl;
+            parameters.forEach(function (parameter, index){
+                if(index === 0)
+                {
+                    renderBody += '?';
+                }
+                else
+                {
+                    renderBody += '&';
+                }
+                for(let key in parameter)
+                {
+                    renderBody += key+'=';
+                    if(parameter[key] === 'row.id')
+                    {
+                        renderBody += '\'+'+encodeURIComponent(parameter[key])+'+\'';
+                    }
+                    else
+                    {
+                        renderBody += encodeURIComponent(parameter[key]);
+                    }
+                }
+
+            })
+            renderBody += `\\'`;
+            renderBody += ")\">"+dataTableColumnsConfig[columnIndex].buttonText+"</button>'}return data;";
+            renderFunctions[columnIndex] = new Function('data', 'type', 'row', 'meta', renderBody);
+            console.log(renderFunctions[columnIndex]);
+            dataTableColumnsConfig[columnIndex].searchable = false;
+            dataTableColumnsConfig[columnIndex].orderable = false;
+            dataTableColumnsConfig[columnIndex].render = renderFunctions[columnIndex];
+
+        }
+    })
 
     dataTableInstance = $(`#${dataTableName}-table`).DataTable({
         responsive: true,
@@ -92,8 +141,9 @@ function initializeDataTable() {
             topStart: 'buttons'
         },
         columnDefs: [
-            { responsivePriority: 1, targets: 0 },
-            { responsivePriority: 2, targets: -1 }
+            { responsivePriority: 1, targets: 1 },
+            { responsivePriority: 2, targets: -1 },
+            {visible:false, targets:0}
         ]
     });
 }