我在 DataTables 上使用 Export 插件从表中导出过滤结果。您可以通过选择列标题上方的选择下拉菜单来导出 Excel 文件,也可以单击为您过滤结果的自定义按钮,例如预构建的过滤器。(我也在使用 selectpicker)。但是,当您在 DataTables 中使用过滤器功能时,您必须重写列标题。否则,您将获得包含来自选择的所有数据的标题标题。所以我为“excelHtml5”按钮的标题添加了重写。这很好用!但它不适用于我的自定义按钮“离线导出”。有谁知道解决方案?
$(document).ready(function () {
function getSearchParams(k){
var p={};
location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
return k?p[k]:p;
}
var devicelist = $('#newdevicelist').DataTable({
keys: true,
autoFill: true,
'iDisplayLength': 20,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title: $("#report_title").val(),
exportOptions: {
format: {
header: function (data, columnIdx) {
return writeTitle(columnIdx) != '' ? writeTitle(columnIdx) : data;
},
}
}
},
{
text: 'Export Offline',
title: 'Offline Report',
filename: 'Offline Report',
exportOptions: {
columns: ':visible',
format: {
header: function (data, column) {
return writeTitle(column) != '' ? writeTitle(column) : data;
},
}
},
action: function ( e, dt, node, config ) {
devicelist.search('').draw();
filterColumn( 5, 'Down');
filterColumn( 6, 'Disconnected');
filterColumn( 7, 'Offline');
$.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);
},
}
],
"initComplete": function (settings, json) {
this.api().columns([2, 4, 5, 6, 7, 8, 9, 10, 12, 13]).every(function () {
var column = this;
var header = this.header();
var select = $('<select multiple class="selectsearch selectpicker' + column.index() + '" rel="' + column.index() + '" title="' + $(header).html() + '"><optgroup label="' + $(header).html() + '"><option></option></optgroup></select>')
.appendTo($(column.header()).empty())
column.data().unique().sort().each(function (d, j) {
d = d.split('<p style="font-size: .01em;">').pop().split('</p>').shift();
if ( d != "" ) {
select.append('<option value="' + d + '">' + d + '</option>')
}
});
});
$('.selectpicker2, .selectpicker3, .selectpicker4, .selectpicker5, .selectpicker6, .selectpicker7, .selectpicker8, .selectpicker9, .selectpicker10, .selectpicker12, .selectpicker13').selectpicker({
style: 'btn-default',
size: 4
});
$('#clear-all-cache').show();
$('.select-type').show();
$('.buttons-excel').html("<i class='fa fa-fw fa-file-excel-o'></i> Excel");
$('div.dt-buttons').prepend('<a class="dt-button bg-blue buttons-html5" id="reset-list" href="#">Reset List</a>' );
},
});
function filterColumn(i, search) {
// alert( search + ' - ' + i);
// var query = "(( )|^)" + regex_escape(search) + "(( )|$)";
$('#newdevicelist').DataTable().column(i).search(
search,
1, 0
).draw();
}
});