Skip to content

Commit fb5cf29

Browse files
pxpmpxpm
authored
Merge pull request #5831 from Laravel-Backpack/fix-export-buttons
fix export buttons
2 parents 774a83f + a222bb5 commit fb5cf29

File tree

1 file changed

+106
-38
lines changed

1 file changed

+106
-38
lines changed

‎src/resources/views/crud/inc/export_buttons.blade.php‎

Lines changed: 106 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,24 @@
3030
node.querySelector('select')?.selectedOptions[0]?.value ??
3131
dataTablesExportStrip(data),
3232
};
33+
34+
let getColumnVisibility = function(dt, idx, node) {
35+
try {
36+
var $tableFromNode = $(node).closest('table');
37+
38+
if ($tableFromNode.length === 0) {
39+
return false;
40+
}
41+
42+
var $header = $tableFromNode.find('thead th').eq(idx);
43+
44+
var isDomVisible = $header.length > 0 && $header.is(':visible') && $header.css('display') !== 'none';
45+
46+
return isDomVisible;
47+
} catch (e) {
48+
return true; // Default to visible if there's an error
49+
}
50+
};
3351
3452
// Create an export buttons configuration that can be applied to any table
3553
window.crud.exportButtonsConfig = [
@@ -44,88 +62,95 @@
4462
extend: 'copyHtml5',
4563
exportOptions: {
4664
columns: function ( idx, data, node ) {
47-
// Use the current table from the crud.table object
4865
var dt = $(node).closest('table').DataTable();
49-
var $column = dt.column(idx);
50-
return ($column.visible() && $(node).attr('data-visible-in-export') != 'false') || $(node).attr('data-force-export') == 'true';
66+
var isVisible = getColumnVisibility(dt, idx, node);
67+
var isExportable = $(node).attr('data-visible-in-export') == 'true';
68+
var isForceExport = $(node).attr('data-force-export') == 'true';
69+
70+
if(isForceExport && isExportable) {
71+
return true;
72+
}
73+
return isVisible && isExportable;
5174
},
5275
format: dataTablesExportFormat,
5376
},
54-
action: function(e, dt, button, config) {
55-
window.crud.responsiveToggle(dt);
56-
$.fn.DataTable.ext.buttons.copyHtml5.action.call(this, e, dt, button, config);
57-
window.crud.responsiveToggle(dt);
58-
}
5977
},
6078
{
6179
name: 'excelHtml5',
6280
extend: 'excelHtml5',
6381
exportOptions: {
6482
columns: function ( idx, data, node ) {
6583
var dt = $(node).closest('table').DataTable();
66-
var $column = dt.column(idx);
67-
return ($column.visible() && $(node).attr('data-visible-in-export') != 'false') || $(node).attr('data-force-export') == 'true';
84+
var isVisible = getColumnVisibility(dt, idx, node);
85+
var isExportable = $(node).attr('data-visible-in-export') == 'true';
86+
var isForceExport = $(node).attr('data-force-export') == 'true';
87+
88+
if(isForceExport && isExportable) {
89+
return true;
90+
}
91+
return isVisible && isExportable;
6892
},
6993
format: dataTablesExportFormat,
7094
},
71-
action: function(e, dt, button, config) {
72-
window.crud.responsiveToggle(dt);
73-
$.fn.DataTable.ext.buttons.excelHtml5.action.call(this, e, dt, button, config);
74-
window.crud.responsiveToggle(dt);
75-
}
7695
},
7796
{
7897
name: 'csvHtml5',
7998
extend: 'csvHtml5',
8099
exportOptions: {
81100
columns: function ( idx, data, node ) {
82101
var dt = $(node).closest('table').DataTable();
83-
var $column = dt.column(idx);
84-
return ($column.visible() && $(node).attr('data-visible-in-export') != 'false') || $(node).attr('data-force-export') == 'true';
102+
var isVisible = getColumnVisibility(dt, idx, node);
103+
var isExportable = $(node).attr('data-visible-in-export') == 'true';
104+
var isForceExport = $(node).attr('data-force-export') == 'true';
105+
106+
if(isForceExport && isExportable) {
107+
return true;
108+
}
109+
110+
return isVisible && isExportable;
85111
},
86112
format: dataTablesExportFormat,
87113
},
88-
action: function(e, dt, button, config) {
89-
window.crud.responsiveToggle(dt);
90-
$.fn.DataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config);
91-
window.crud.responsiveToggle(dt);
92-
}
93114
},
94115
{
95116
name: 'pdfHtml5',
96117
extend: 'pdfHtml5',
97118
exportOptions: {
98119
columns: function ( idx, data, node ) {
99120
var dt = $(node).closest('table').DataTable();
100-
var $column = dt.column(idx);
101-
return ($column.visible() && $(node).attr('data-visible-in-export') != 'false') || $(node).attr('data-force-export') == 'true';
121+
var isVisible = getColumnVisibility(dt, idx, node);
122+
var isExportable = $(node).attr('data-visible-in-export') == 'true';
123+
var isForceExport = $(node).attr('data-force-export') == 'true';
124+
125+
if(isForceExport && isExportable) {
126+
return true;
127+
}
128+
129+
return isVisible && isExportable;
102130
},
103131
format: dataTablesExportFormat,
104132
},
105-
orientation: 'landscape',
106-
action: function(e, dt, button, config) {
107-
window.crud.responsiveToggle(dt);
108-
$.fn.DataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, button, config);
109-
window.crud.responsiveToggle(dt);
110-
}
133+
orientation: 'landscape'
111134
},
112135
{
113136
name: 'print',
114137
extend: 'print',
115138
exportOptions: {
116139
columns: function ( idx, data, node ) {
117140
var dt = $(node).closest('table').DataTable();
118-
var $column = dt.column(idx);
119-
return ($column.visible() && $(node).attr('data-visible-in-export') != 'false') || $(node).attr('data-force-export') == 'true';
141+
var isVisible = getColumnVisibility(dt, idx, node);
142+
var isExportable = $(node).attr('data-visible-in-export') == 'true';
143+
var isForceExport = $(node).attr('data-force-export') == 'true';
144+
145+
if(isForceExport && isExportable) {
146+
return true;
147+
}
148+
149+
return isVisible && isExportable;
120150
},
121151
format: dataTablesExportFormat,
122152
},
123153
orientation: 'landscape',
124-
action: function(e, dt, button, config) {
125-
window.crud.responsiveToggle(dt);
126-
$.fn.DataTable.ext.buttons.print.action.call(this, e, dt, button, config);
127-
window.crud.responsiveToggle(dt);
128-
}
129154
}
130155
]
131156
}
@@ -164,8 +189,51 @@
164189
165190
// Add the function to the draw event queue
166191
window.crud.defaultTableConfig.addFunctionToDataTablesDrawEventQueue('moveExportButtonsToTopRight');
192+
193+
window.crud.setupExportHandlers = function(tableId) {
194+
tableId = tableId || 'crudTable';
195+
var table = window.crud.tables[tableId];
196+
197+
if (!table || !table.buttons) return;
198+
199+
// Add click handlers to all export buttons
200+
table.buttons().each(function(button, idx) {
201+
var buttonNode = button.node;
202+
if (buttonNode && (
203+
buttonNode.classList.contains('buttons-pdf') ||
204+
buttonNode.classList.contains('buttons-excel') ||
205+
buttonNode.classList.contains('buttons-csv') ||
206+
buttonNode.classList.contains('buttons-copy') ||
207+
buttonNode.classList.contains('buttons-print')
208+
)) {
209+
// Remove any existing handlers
210+
$(buttonNode).off('click.responsiveExport');
211+
212+
// Add our custom handler
213+
$(buttonNode).on('click.responsiveExport', function(e) {
214+
e.preventDefault();
215+
e.stopImmediatePropagation();
216+
217+
window.crud.responsiveToggle(table);
218+
219+
setTimeout(function() {
220+
$(buttonNode).off('click.responsiveExport');
221+
222+
$(buttonNode).trigger('click');
223+
224+
setTimeout(function() {
225+
$(buttonNode).on('click.responsiveExport', arguments.callee);
226+
}, 100);
227+
}, 50);
228+
});
229+
}
230+
});
231+
};
232+
233+
// Add the export handler setup to the draw event queue
234+
window.crud.defaultTableConfig.addFunctionToDataTablesDrawEventQueue('setupExportHandlers');
167235
</script>
168236
@push('after_styles')
169237
@basset('https://cdn.datatables.net/buttons/3.2.0/css/buttons.bootstrap5.min.css')
170238
@endpush
171-
@endif
239+
@endif

0 commit comments

Comments
 (0)