Как мы можем отключить кнопки экспорта данных (или предотвратить событие щелчка), когда объект данных пуст?
Я использую datatable, мне нужно отключить кнопки экспорта (Excel, PDF), когда сетка имеет пустые строки. Как мы можем справиться с действиями нажатия кнопок экспорта данных?
Я сделал инициализацию сетки, как показано ниже. Я не знаю, как обращаться с датируемыми кнопками экспорта (PDF, Excel). Можете ли вы помочь мне, как это исправить.
Обновить:
- И у меня есть еще одна проблема: когда пользователь нажимает кнопку Excel или PDF, ширина столбцов сетки уменьшается.
Мне даже нужно, чтобы пользователь нажимал на кнопки Excel или PDF, ширина столбца сетки не должна меняться. Как мы можем достичь этого?
После экспорта данных в Excel столбцы не настраиваются автоматически в Excel.
Как мы можем сделать автоматическую настройку столбцов (после экспорта данных в Excel)?
var buttonCommon = { exportOptions: { format: { body: function(data, column, row, node) { return data; } } } }; var dataTableObj = { "processing": true, "destroy": true, "scrollX": true, "columns": [{ "data": "CollegeName", "width":"30%" }, { "data": "AffiliatedTo", "width":"15%" }, { "data": "TPOName", "width":"20%" }, { "data": "Phone", }, { "data": "Website", "bSortable": false }], dom: 'lBfrtip', buttons: [ $.extend( true, {}, buttonCommon, { extend: 'excelHtml5', title: 'Colleges', } ), { extend: 'pdf', title: 'Colleges' } ], fnRowCallback: function(nRow, aData, iDisplayIndex) { //Some code return nRow; } }; var dataTbl = $('#tblColleges').DataTable(dataTableObj);
3 ответа
Я не знаю, насколько целесообразно следующее решение, но оно решило мою проблему.
Мне нужно отключить кнопки экспорта (Excel, PDF), когда в сетке есть пустые строки. Как мы можем справиться с действиями нажатия кнопок экспорта данных?
здесь я сделал со свойством действия datatables.
buttons: [{
extend: 'excelHtml5',
title: 'Colleges',
action: function(e, dt, button, config) {
if (this.data().length > 0) {
$.fn.dataTable.ext.buttons.excelHtml5.action(e, dt, button, config);
$scope.hasAlert = 0;
$scope.$apply();
} else {
$scope.hasAlert = 2;
$scope.alertMsg = __APP_MESSAGE__.GridEmptyMsg;
$scope.$apply();
}
}
}, {
extend: 'pdf',
title: 'Colleges',
action: function(e, dt, button, config) {
if (this.data().length > 0) {
$.fn.dataTable.ext.buttons.pdfHtml5.action(e, dt, button, config);
$scope.hasAlert = 0;
$scope.$apply();
} else {
$scope.hasAlert = 2;
$scope.alertMsg = __APP_MESSAGE__.GridEmptyMsg;
$scope.$apply();
}
}
},
]
Это решение сработало для меня, поместите его в функцию fnDrawCallback
$(tableName).dataTable({
"fnDrawCallback":function () {
var table = $(tableName).DataTable();
if (table.data().length === 0)
table.buttons('.buttons-html5').disable();
else
table.buttons('.buttons-html5').enable();
}
});
Самый простой способ справиться с действиями щелчка кнопки экспорта данных — создать собственную кнопку и активировать кнопку экспорта данных одним нажатием кнопки. Таким образом вы будете обрабатывать действия щелчка созданной вами кнопки:
$('#exportBtn').on('click', function () {
dataTbl.button(0).trigger();
});
Вы можете удалить
dom: 'lBfrtip'
чтобы скрыть исходную кнопку с данными.