From 11a2ede11187aa188f040e1f84121c166da4ab63 Mon Sep 17 00:00:00 2001 From: Thomas Zilio Date: Thu, 9 Jul 2020 09:02:40 +0200 Subject: [PATCH] Ottimizzazione selezione righe per le tabelle --- ajax.php | 25 ----- assets/src/js/datatables-buttons.js | 31 +++---- assets/src/js/functions/datatables.js | 127 +++++++++++++------------- gulpfile.js | 4 +- include/manager.php | 3 +- 5 files changed, 78 insertions(+), 112 deletions(-) diff --git a/ajax.php b/ajax.php index 836e1f4c2..f3e658377 100755 --- a/ajax.php +++ b/ajax.php @@ -140,30 +140,5 @@ switch (filter('op')) { echo json_encode($response); - break; - - // Impostazione di selezione di tutti le righe della tabella - case 'table-row-selection': - $row_ids = filter('row_ids'); - $type = filter('type'); - $selected = &$_SESSION['module_'.$id_module]['selected']; - - if (isset($row_ids)) { - foreach ($row_ids as $row_id) { - if (!isset($row_id)) { - continue; - } - - // Toggle per la riga indicata - if ($type == 'deselect' && isset($selected[$row_id])) { - unset($selected[$row_id]); - } elseif ($type == 'select') { - $selected[$row_id] = true; - } - } - } - - echo json_encode(array_keys($selected)); - break; } diff --git a/assets/src/js/datatables-buttons.js b/assets/src/js/datatables-buttons.js index b48107de3..b2897c186 100755 --- a/assets/src/js/datatables-buttons.js +++ b/assets/src/js/datatables-buttons.js @@ -1,30 +1,30 @@ $(document).ready(function () { // Pulsanti di Datatables - $(".btn-csv").click(function (e) { + $(".btn-csv").off("click").on("click", function (e) { var table = $(document).find("#" + $(this).closest("[data-target]").data("target")).DataTable(); table.buttons(0).trigger(); }); - $(".btn-excel").click(function (e) { + $(".btn-excel").off("click").on("click", function (e) { var table = $(document).find("#" + $(this).closest("[data-target]").data("target")).DataTable(); table.buttons(3).trigger(); }); - $(".btn-pdf").click(function (e) { + $(".btn-pdf").off("click").on("click", function (e) { var table = $(document).find("#" + $(this).closest("[data-target]").data("target")).DataTable(); table.buttons(4).trigger(); }); - $(".btn-copy").click(function (e) { + $(".btn-copy").off("click").on("click", function (e) { var table = $(document).find("#" + $(this).closest("[data-target]").data("target")).DataTable(); table.buttons(1).trigger(); }); - $(".btn-print").click(function (e) { + $(".btn-print").off("click").on("click", function (e) { var table = $(document).find("#" + $(this).closest("[data-target]").data("target")).DataTable(); table.buttons(2).trigger(); @@ -51,14 +51,12 @@ $(document).ready(function () { var row_ids = response.data.map(function(a) {return a.id;}); // Chiamata di selezione completa - rowSelection(wrapper, "select", row_ids).then(function () { - table.clear().draw(); + wrapper.addSelectedRows(row_ids); + table.clear().draw(); - $("#main_loading").hide(); - }) + $("#main_loading").hide(); } }) - }); $(".btn-select-none").click(function () { @@ -68,27 +66,24 @@ $(document).ready(function () { // Chiamata di deselezione completa var row_ids = wrapper.getSelectedRows(); - rowSelection(wrapper, "deselect", row_ids).then(function () { - table.clear().draw(); - }) + wrapper.removeSelectedRows(row_ids); + table.clear().draw(); }); $(document).on("click", ".select-checkbox", function () { var row = $(this).parent(); var row_id = row.attr("id"); + var table_selector = $(this).closest(".dataTable"); var wrapper = getTable(table_selector); - var type; if (row.hasClass("selected")) { //table.datatable.rows("#" + row_id).select(); - type = "select"; + wrapper.addSelectedRows(row_id); } else { //table.datatable.rows("#" + row_id).deselect(); - type = "deselect"; + wrapper.removeSelectedRows(row_id); } - - rowSelection(wrapper, type, row_id); }); $(".bulk-action").click(function () { diff --git a/assets/src/js/functions/datatables.js b/assets/src/js/functions/datatables.js index 9e81e4a93..497535957 100755 --- a/assets/src/js/functions/datatables.js +++ b/assets/src/js/functions/datatables.js @@ -44,9 +44,7 @@ function start_datatables() { var tempo_attesa_ricerche = (globals.tempo_attesa_ricerche * 1000); $this.on('preInit.dt', function (ev, settings) { - if ($(ev.target).hasClass("main-records")) { - $('#mini-loader').show(); - } + $('#mini-loader').show(); }); var table = $this.DataTable({ @@ -255,15 +253,6 @@ function start_datatables() { $(this).parent().addClass("clickable"); }); - var container = $(document).find('[data-target=' + $this.attr('id') + ']'); - if (api.rows({ - selected: true - }).count() > 0) { - container.find('.table-btn').removeClass('disabled').attr('disabled', false); - } else { - container.find('.table-btn').addClass('disabled').attr('disabled', true); - } - // Reimposto il flag sulle righe ricaricate selezionate in precedenza var selected = $this.data('selected') ? $this.data('selected').split(';') : []; table.rows().every(function (rowIdx) { @@ -343,7 +332,7 @@ function getTableSearch() { var search = getUrlVars(); globals.search.forEach(function (value, index, array) { - if (search[array[index]] == undefined) { + if (search[array[index]] === undefined) { search[array[index]] = array[value]; } }); @@ -351,37 +340,6 @@ function getTableSearch() { return search; } -/** - * Invia una richiesta di selezione per un insieme di righe delle tabelle Datatables. - */ -function rowSelection(wrapper, type, row_ids) { - return $.ajax({ - url: globals.rootdir + "/ajax.php", - type: "POST", - dataType: "json", - data: { - id_module: wrapper.id_module, - id_plugin: wrapper.id_plugin, - op: "table-row-selection", - type: type, - row_ids: row_ids, - }, - success: function (selected) { - wrapper.table.data('selected', selected.join(';')); - - var bulk_container = wrapper.getActionsContainer(); - var btn_container = wrapper.getButtonsContainer(); - if (selected.length > 0) { - bulk_container.removeClass('disabled').attr('disabled', false); - btn_container.removeClass('disabled').attr('disabled', false); - } else { - bulk_container.addClass('disabled').attr('disabled', true); - btn_container.addClass('disabled').attr('disabled', true); - } - } - }); -} - /** * Restituisce un oggetto che permette di gestire le tabelle DataTables. * @@ -390,36 +348,73 @@ function rowSelection(wrapper, type, row_ids) { function getTable(selector) { var table = $(selector); - if (!$.fn.DataTable.isDataTable(table)) { - if(table.hasClass('datatables')){ - start_local_datatables(); - } else { - start_datatables(); - } - } - - var id_module = table.data('idmodule'); - var id_plugin = table.data('idplugin'); - - var datatable = table.DataTable(); + var selected = new Map(); + var selected_ids = table.data('selected') ? table.data('selected').split(';') : []; + selected_ids.forEach(function(item, index) { + selected.set(item, true); + }); return { table: table, - id_module: id_module, - id_plugin: id_plugin, - datatable: datatable, - getSelectedRows: function () { - var list = table.data('selected'); - return list ? list.split(';') : []; - }, - setSelectedRows: function (list) { - return table.data('selected', list.join(';')); + + id_module: table.data('idmodule'), + id_plugin: table.data('idplugin'), + + initDatatable: function() { + if (table.hasClass('datatables')) { + start_local_datatables(); + } else { + start_datatables(); + } }, + datatable: table.DataTable(), + + // Funzioni per i contenitori relativi alla tabella getButtonsContainer: function () { return $('.row[data-target="' + table.attr('id') + '"]').find('.table-btn'); }, getActionsContainer: function () { return $('.row[data-target="' + table.attr('id') + '"]').find('.bulk-container'); - } + }, + + // Gestione delle righe selezionate + selected: selected, + getSelectedRows: function () { + return Array.from(selected.keys()); + }, + saveSelectedRows: function () { + var selected_rows = this.getSelectedRows(); + table.data('selected', selected_rows.join(';')); + + var bulk_container = this.getActionsContainer(); + var btn_container = this.getButtonsContainer(); + if (selected_rows.length > 0) { + bulk_container.removeClass('disabled').attr('disabled', false); + btn_container.removeClass('disabled').attr('disabled', false); + } else { + bulk_container.addClass('disabled').attr('disabled', true); + btn_container.addClass('disabled').attr('disabled', true); + } + }, + addSelectedRows: function (row_ids) { + row_ids = Array.isArray(row_ids) ? row_ids : [row_ids]; + row_ids.forEach(function(item, index) { + selected.set(item, true); + }); + + this.saveSelectedRows(); + }, + removeSelectedRows: function (row_ids) { + row_ids = Array.isArray(row_ids) ? row_ids : [row_ids]; + row_ids.forEach(function(item, index) { + selected.delete(item); + }); + + this.saveSelectedRows(); + }, + clearSelectedRows: function () { + selected.clear(); + this.saveSelectedRows(); + }, }; } diff --git a/gulpfile.js b/gulpfile.js index f54681fc4..f6dd230c7 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -51,7 +51,7 @@ const JS = gulp.parallel(() => { debugging: config.debug, })) .pipe(concat('app.min.js')) - //.pipe(minifyJS()) + .pipe(minifyJS()) .pipe(gulp.dest(config.production + '/' + config.paths.js)); }, srcJS); @@ -68,7 +68,7 @@ function srcJS() { config.development + '/' + config.paths.js + '/functions/*.js', ]) .pipe(concat('functions.min.js')) - .pipe(minifyJS()) + //.pipe(minifyJS()) .pipe(gulp.dest(config.production + '/' + config.paths.js)); return merge(js, indip); diff --git a/include/manager.php b/include/manager.php index 219c63973..36a1f00ef 100755 --- a/include/manager.php +++ b/include/manager.php @@ -77,7 +77,7 @@ if (!empty($type) && $type != 'menu' && $type != 'custom') { $table_id = 'main_'.rand(0, 99); echo ' - +
'; @@ -177,6 +177,7 @@ if (!empty($type) && $type != 'menu' && $type != 'custom') {
+
'; if (setting('Abilita esportazione Excel e PDF')) {