diff options
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/create_datatable.js | 182 |
1 files changed, 90 insertions, 92 deletions
diff --git a/wqflask/wqflask/static/new/javascript/create_datatable.js b/wqflask/wqflask/static/new/javascript/create_datatable.js index 18a4f9d7..4c9d5c78 100644 --- a/wqflask/wqflask/static/new/javascript/create_datatable.js +++ b/wqflask/wqflask/static/new/javascript/create_datatable.js @@ -1,92 +1,90 @@ -create_table = function(tableId, tableData, columnDefs, customSettings) {
-
- loadDataTable(tableId=tableId, tableFata=tableData, tableSettings=tableSettings, firstRun=true)
-
- function loadDataTable(tableId, tableData, tableSettings, firstRun=false){
- if (!firstRun){
- setUserColumnsDefWidths(tableId);
- }
-
- tableSettings = {
- 'data': tableData,
- 'columns': columnDefs,
- "sDom": "iti",
- "destroy": true,
- "autoWidth": false,
- "bSortClasses": false,
- "scrollY": "100vh",
- "scrollCollapse": true,
- "scroller": true,
- "iDisplayLength": -1,
- "initComplete": function (settings) {
- // Add JQueryUI resizable functionality to each th in the ScrollHead table
- $('#' + table_id + '_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);
- }
- });
- }
- }
-
- // Replace default settings with custom settings or add custom settings if not already set in default settings
- $.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
-
- let checkedRows = getCheckedRows(tableId);
- theTable = $('#' + tableId).DataTable(tableSettings);
- if (checkedRows.length > 0){
- recheckRows(theTable, checkedRows);
- }
- } else {
- theTable = $('#' + tableId).DataTable(tableSettings);
- theTable.draw();
- }
-
- theTable.on( 'order.dt search.dt draw.dt', function () {
- theTable.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
- cell.innerHTML = i+1;
- } );
- } ).draw();
-
- if (firstRun){
- $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px");
- }
-
- $('#' + tableId + '_searchbox').on( 'keyup', function () {
- theTable.search($(this).val()).draw();
- } );
-
- $('.toggle-vis').on('click', function (e) {
- e.preventDefault();
-
- function toggleColumn(column) {
- // Toggle column visibility
- column.visible( ! column.visible() );
- if (column.visible()){
- $(this).removeClass("active");
- } else {
- $(this).addClass("active");
- }
- }
-
- // Get the column API object
- var targetCols = $(this).attr('data-column').split(",")
- for (let i = 0; i < targetCols.length; i++){
- var column = theTable.column( target_cols[i] );
- toggleColumn(column);
- }
- } );
-
- }
-}
+create_table = function(tableId, tableData, columnDefs, customSettings) { + + loadDataTable(tableId=tableId, tableFata=tableData, tableSettings=tableSettings, firstRun=true) + + function loadDataTable(tableId, tableData, tableSettings, firstRun=false){ + if (!firstRun){ + setUserColumnsDefWidths(tableId); + } + + tableSettings = { + 'data': tableData, + 'columns': columnDefs, + "sDom": "iti", + "destroy": true, + "autoWidth": false, + "bSortClasses": false, + "scrollY": "100vh", + "scrollCollapse": true, + "scroller": true, + "iDisplayLength": -1, + "initComplete": function (settings) { + // Add JQueryUI resizable functionality to each th in the ScrollHead table + $('#' + table_id + '_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); + } + }); + } + } + + // Replace default settings with custom settings or add custom settings if not already set in default settings + $.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 + + let checkedRows = getCheckedRows(tableId); + theTable = $('#' + tableId).DataTable(tableSettings); + if (checkedRows.length > 0){ + recheckRows(theTable, checkedRows); + } + } else { + theTable = $('#' + tableId).DataTable(tableSettings); + theTable.draw(); + } + + theTable.on( 'order.dt search.dt draw.dt', function () { + theTable.column(1, {search:'applied', order:'applied'}).nodes().each( function (cell, i) { + cell.innerHTML = i+1; + } ); + } ).draw(); + + if (firstRun){ + $('#' + tableId + '_container').css("width", String($('#' + tableId).width() + 17) + "px"); + } + + $('#' + tableId + '_searchbox').on( 'keyup', function () { + theTable.search($(this).val()).draw(); + } ); + + $('.toggle-vis').on('click', function (e) { + e.preventDefault(); + + function toggleColumn(column) { + // Toggle column visibility + column.visible( ! column.visible() ); + if (column.visible()){ + $(this).removeClass("active"); + } else { + $(this).addClass("active"); + } + } + + // Get the column API object + var targetCols = $(this).attr('data-column').split(",") + for (let i = 0; i < targetCols.length; i++){ + var column = theTable.column( target_cols[i] ); + toggleColumn(column); + } + } ); +} |