问题
Is there a way to use the export buttons and yadcf chozen filter together without messing up the column headers in the export see below the column Order Number has Select appended
Order NumberSelect value20766903232802532374885123748865237490732374944323749625x
Code:
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="/newwebadmin/mvc/orders/assets/css/cancellationStatistics.css" />
<link rel="stylesheet" type="text/css" href="/newwebadmin/js/chosen/chosen.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.css">
<script src="/newwebadmin/mvc/orders/assets/js/cancellations/ChartNew.js"></script>
<script src="/newwebadmin/mvc/orders/assets/js/cancellations/shapesInChart.js"></script>
<script src="/newwebadmin/mvc/orders/assets/js/cancellations/specialInChartData.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
<script src="/newwebadmin/js/Chosen/chosen.jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.1/jquery.dataTables.yadcf.min.js"></script>
<style>
input[type="search"] {
border:1px #cccccc solid;
padding:2px;
border-radius: 2px;
}
</style>
<title>Cancel Order Reportle></title>
</head>
<cfset local.getCancellationReportData = rc.cancellations>
<body>
<!--- <cfdump var="#local#"> --->
<cfoutput>
<div class="flexbox-container">
<div class="main-content clearfix">
<div class="container">
<form action="" method="post">
<label for="startDate">Date Range: </label>
<input type="text" id="startDate" name="startDate" class="button" value="#structKeyExists(form, "startDate") ? form.startDate : DateFormat(Now(),'mm/dd/yyyy') #">
<label for="endDate">to</label>
<input type="text" id="endDate" name="endDate" class="button" value="#structKeyExists(form, "endDate") ? form.endDate : DateFormat(DateAdd('m',1,Now()),'mm/dd/yyyy') #">
<input type="submit" id="btnFilter" value="Filter" class="button">
</form>
<br><br>
<button id="platinum" class="button">Show Platinum Customers</button>
<button id="nonplatinum" class="button">Show Non-Platinum Customers</button>
<button id="all" class="button">Show All</button>
<br><br>
<table id="report" class="display" cellspacing="0" width="100%">
<thead>
<th align="left">Order Number</th>
<th align="left">VendorID</th>
<th align="left">User Index</th>
<th align="left">Customer Type</th>
<th align="left">Date</th>
<th align="left">## of items cancelled</th>
<th align="left">Total$</th>
<th align="left">Canceled By</th>
<th align="left">Reason</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5" style="text-align:right">Total:</th>
<th style="text-align:left"></th>
<th colspan="2" style="text-align:left"></th>
<th></th>
</tr>
</tfoot>
<tbody>
<cfloop query="local.getCancellationReportData">
<tr data-isPlatinum="#is_platinum#">
<td>#order_number#</td>
<td>#len(vendorID) ? vendorID: 'unknown'#</td>
<td>#len(dbo_tblEmployee_ID) ? dbo_tblEmployee_ID: 'unknown'#</td>
<td>#customerType#</td>
<td>#DateFormat(date,'mm/dd/yyyy')# #timeFormat(date,'hh:mm TT')#</td>
<td>#qty#</td>
<td align="right">#DollarFOrmat(ExtendedCost)#</td>
<td>#cancelledBy#</td>
<td>#cancellation_reason#</td>
</tr>
</cfloop>
</tbody>
</table>
</div>
</div>
</div>
</cfoutput>
<script>
$(document).ready(function() {
var table = $('#report').DataTable( {
dom: 'Bfrtip',
buttons: [
{extend :'excel', text:'Export to Excel'}
,{extend :'pdf' , text:'Export to PDF', orientation: 'landscape', pageSize: 'LEGAL'}
,'print'
],
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 6 )
.data()
.reduce( function (a, b) {
return intVal(intVal(a) + intVal(b)).toFixed(2);
} );
// Total over this page
pageTotal = api
.column( 6, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(intVal(a) + intVal(b)).toFixed(2);
}, 0 );
// Total over all pages
cantotal = api
.column( 5 )
.data()
.reduce( function (a, b) {
return intVal(intVal(a) + intVal(b));
} );
// Total over this page
canpageTotal = api
.column( 5, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(intVal(a) + intVal(b));
}, 0 );
// Update footer
$( api.column( 6 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total )'
);
// Update footer
$( api.column( 5 ).footer() ).html(
''+canpageTotal +' ( out of '+ cantotal +')'
);
}
});
$("#platinum").click(function() {
$.fn.dataTable.ext.search.pop();
table.draw();
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(table.row(dataIndex).node()).attr('data-isPlatinum') == 1;
}
);
table.draw();
});
$("#nonplatinum").click(function() {
$.fn.dataTable.ext.search.pop();
table.draw();
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(table.row(dataIndex).node()).attr('data-isPlatinum') == 0;
}
);
table.draw();
});
$("#all").click(function() {
$.fn.dataTable.ext.search.pop();
table.draw();
});
$('.button').button();
var dateFormat = "mm/dd/yy",
from = $( "#startDate" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#endDate" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
};
yadcf.init(table, [
{column_number : 0},
{column_number : 1, filter_type: "multi_select",select_type: 'chosen'},
{column_number : 2},
{column_number : 3},
{column_number : 4},
{column_number : 5},
{column_number : 6},
{column_number : 7},
{column_number : 8},
{column_number : 9}
]);
});
</script>
I have tied this
buttons: [
{extend :'excel', text:'Export to Excel'}
,{extend :'pdf' , text:'Export to PDF', orientation: 'landscape', pageSize: 'LEGAL'
,exportOptions:{
rows: ':not(.notPrintable)'
}
}
,'print'
],
...
yadcf.init(table, [
{column_number : 0},
{column_number : 1, filter_type: "multi_select",select_type: 'chosen'},
{column_number : 2},
{column_number : 3},
{column_number : 4},
{column_number : 5},
{column_number : 6},
{column_number : 7},
{column_number : 8}
]);
$(".yadcf-filter-wrapper").addClass("notPrintable");
回答1:
This is what worked for me
buttons: [
{extend :'excel', text:'Export to Excel'
,exportOptions: {
format: {
header: function ( data, row, column, node ) {
var newdata = data;
newdata = newdata.replace(/<.*?<\/*?>/gi, '');
newdata = newdata.replace(/<div.*?<\/div>/gi, '');
newdata = newdata.replace(/<\/div.*?<\/div>/gi, '');
return newdata;
}
}
}
}
,{extend :'pdf' , text:'Export to PDF'
,exportOptions: {
format: {
header: function ( data, row, column, node ) {
var newdata = data;
newdata = newdata.replace(/<.*?<\/*?>/gi, '');
newdata = newdata.replace(/<div.*?<\/div>/gi, '');
newdata = newdata.replace(/<\/div.*?<\/div>/gi, '');
return newdata;
}
}
}
}
,{extend :'print' , text:'Print'
,exportOptions: {
format: {
header: function ( data, row, column, node ) {
var newdata = data;
newdata = newdata.replace(/<.*?<\/*?>/gi, '');
newdata = newdata.replace(/<div.*?<\/div>/gi, '');
newdata = newdata.replace(/<\/div.*?<\/div>/gi, '');
return newdata;
}
}
}
}
],
来源：https://stackoverflow.com/questions/44048459/datatables-using-export-buttons-and-yadcf-causes-select-lists-to-be-exported