我目前遇到一个挑战,我的数据表导出按钮仅导出前 10 行或当前可见的行,而不是使用搜索栏导出所有数据或筛选数据。换句话说,它只导出DataTable第一页中的数据。
以下是我尝试过但仍然徒劳的:
var table = $('#dt_payment_records').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('fees_management.payment_records.index') }}",
columns: [
{data: 'DT_RowIndex', orderable: false, searchable: false},
{data: 'student.admission_no', name: 'student.admission_no'},
{
data: null,
render: function(data, type, row) {
if (data.student.middle_name !== null) {
return data.student.first_name + " " + data.student.middle_name + " " + data.student.last_name;
} else {
return data.student.first_name + " " + data.student.last_name;
}
},
name: 'student_id',
},
{data: 'year', name: 'year'},
{data: 'term', name: 'term'},
{data: 'class.class_name', name: 'class_id'},
{
data: 'total_amount',
name: 'total_amount',
render: $.fn.dataTable.render.number(',', '.', 0, '')
},
{
data: 'amount_paid',
name: 'amount_paid',
render: $.fn.dataTable.render.number(',', '.', 0, '')
},
{
data: 'balance',
name: 'balance',
render: $.fn.dataTable.render.number(',', '.', 0, '')
}
],
dom: 'Bfrtip', // Include Buttons extension
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-copy"></i> Copy',
className: 'btn btn-default',
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel"></i> Excel',
className: 'btn btn-default',
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf"></i> PDF',
className: 'btn btn-default',
},
{
extend: 'print',
text: '<i class="fa fa-print"></i> Print',
className: 'btn btn-default',
}
]
});
我的期望是导出所有数据或选择的数据,但仅导出数据表第一页上的数据。 请注意,虽然我没有使用服务器端处理,但这些按钮工作得很好,但由于我正在处理大量数据,所以我选择了服务器端,现在按钮无法正常工作。
我得到了解决方案,我想我会在这里分享: 在 .ready 函数中创建此函数;
function newexportaction(e, dt, button, config) {
var self = this;
var oldStart = dt.settings()[0]._iDisplayStart;
dt.one('preXhr', function (e, s, data) {
// Just this once, load all data from the server...
data.start = 0;
//data.length = 2147483647;
data.length = dt.page.info().recordsTotal;
dt.one('preDraw', function (e, settings) {
// Call the original action function
if (button[0].className.indexOf('buttons-copy') >= 0) {
$.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
} else if (button[0].className.indexOf('buttons-excel') >= 0) {
$.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
$.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
$.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
} else if (button[0].className.indexOf('buttons-csv') >= 0) {
$.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
$.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
$.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
} else if (button[0].className.indexOf('buttons-pdf') >= 0) {
$.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
$.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
$.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
} else if (button[0].className.indexOf('buttons-print') >= 0) {
$.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
}
dt.one('preXhr', function (e, s, data) {
// DataTables thinks the first item displayed is index 0, but we're not drawing that.
// Set the property to what it was before exporting.
settings._iDisplayStart = oldStart;
data.start = oldStart;
});
// Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
setTimeout(dt.ajax.reload, 0);
// Prevent rendering of the full data to the DOM
return false;
});
});
// Requery the server with the new one-time export settings
dt.ajax.reload();
};
下面是该功能的实现方式;
dom: 'Bfrtip', // Include Buttons extension
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-copy"></i> Copy',
className: 'btn btn-default btn-sm',
"action": newexportaction
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel"></i> Excel',
className: 'btn btn-success btn-sm',
"action": newexportaction
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf"></i> PDF',
className: 'btn btn-danger btn-sm',
exportOptions: {
columns: ':not(.no-print)'
}, // Exclude columns with the class 'no-print'
/* orientation: 'landscape', // Set orientation to landscape
pageSize: 'LEGAL', // Optionally set the page size */
"action": newexportaction
},
{
extend: 'print',
text: '<i class="fa fa-print"></i> Print',
className: 'btn btn-secondary btn-sm',
"action": newexportaction
}
]
通过上述操作,现在我可以轻松导出所有数据或选择的数据。
谢谢你