我不知道在哪里使用我当前的代码实现YADCF。
我尝试在DataTables实现结束时使用.yadcf（）。我并不准确地说它在哪里。
注意：我确实在未粘贴的代码段中加载了库。
这是我的代码
<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;
}
});
</script>