Fix manual column width change feature to work in create_datatable.js

1 files changed, 23 insertions, 17 deletions

diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js
index 7b495a8b..217e99be 100644
--- a/wqflask/wqflask/static/new/javascript/create_datatable.js
+++ b/wqflask/wqflask/static/new/javascript/create_datatable.js
@@ -2,9 +2,11 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
 
     loadDataTable(tableId=tableId, tableFata=tableData, customSettings=customSettings, firstRun=true)
 
+    var widthChange = 0; //ZS: For storing the change in width so overall table width can be adjusted by that amount
     function loadDataTable(tableId, tableData, customSettings, firstRun=false){
+
         if (!firstRun){
-            setUserColumnsDefWidths(tableId);
+            columnDefs = setUserColumnsDefWidths(tableId, columnDefs);
         }
 
         tableSettings = {
@@ -20,15 +22,15 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
             "iDisplayLength": -1,
             "initComplete": function (settings) {
                 // Add JQueryUI resizable functionality to each th in the ScrollHead table
-                $('#' + table_id + '_wrapper .dataTables_scrollHead thead th').resizable({
+                $('#' + tableId + '_wrapper .dataTables_scrollHead thead th').resizable({
                     handles: "e",
                     alsoResize: '#' + tableId + '_wrapper .dataTables_scrollHead table', //Not essential but makes the resizing smoother
                     resize: function( event, ui ) {
                         widthChange = ui.size.width - ui.originalSize.width;
                     },
                     stop: function () {
-                        saveColumnSettings(table_id, the_table);
-                        loadDataTable(first_run=false, table_id, table_data);
+                        saveColumnSettings(tableId, theTable);
+                        loadDataTable(tableId, tableData, firstRun=false);
                     }
                 });
             }
@@ -38,19 +40,23 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
         $.each(customSettings, function(key, value) {
             tableSettings[key] = value
         });
-    }
 
-    if (!firstRun){
-        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + widthChange + 17) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
+        if (!firstRun){
+            $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + widthChange + 17) + "px"); // Change the container width by the change in width of the adjusted column, so the overall table size adjusts properly
 
-        let checkedRows = getCheckedRows(tableId);
-        theTable = $('#' + tableId).DataTable(tableSettings);
-        if (checkedRows.length > 0){
-            recheckRows(theTable, checkedRows);
+            let checkedRows = getCheckedRows(tableId);
+            theTable = $('#' + tableId).DataTable(tableSettings);
+            if (checkedRows.length > 0){
+                recheckRows(theTable, checkedRows);
+            }
+        } else {
+            theTable = $('#' + tableId).DataTable(tableSettings);
+            theTable.draw();
+        }
+
+        if (firstRun){
+            $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
         }
-    } else {
-        theTable = $('#' + tableId).DataTable(tableSettings);
-        theTable.draw();
     }
 
     theTable.on( 'order.dt search.dt draw.dt', function () {
@@ -59,9 +65,9 @@ create_table = function(tableId, tableData, columnDefs, customSettings) {
         } );
     } ).draw();
 
-    if (firstRun){
-        $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
-    }
+    window.addEventListener('resize', function(){
+        theTable.columns.adjust();
+    });
 
     $('#' + tableId + '_searchbox').on( 'keyup', function () {
         theTable.search($(this).val()).draw();