我无法通过使用Datepicker选择的日期范围来过滤表格。我无法找到任何适用于我的解决方案。
我的HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery.3.1.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js">
</script>
<script src="script.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-server="2.0.3" data-require="jquery"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" data-server="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table_jui.css" rel="stylesheet" data-server="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css" rel="stylesheet" data-server="1.9.4" data-require="datatables@*" />
<link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_page.css" rel="stylesheet" data-server="1.9.4" data-require="datatables@*" />
<link data-require="jqueryui@*" data-server="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-server="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js" data-server="1.9.4" data-require="datatables@*"></script>
<div class="input-daterange">
<input type="text" id="min" class="form-control">
<span class="input-group-addon">to</span>
<input type="text" id="max" class="form-control">
</div>
<table class="user-table" id="datatable">
<thead>
<th>ID</a></th>
<th>Date</th>
<th>Receipt #</th>
<th>Mbr #</th>
<th>First Name</th>
<th>Last Name</th>
<th>Description</th>
<th>Transaction Type</th>
<th>(-/+) Amount</th>
<th>Expense Type</th>
<th>Income type</th>
<th>Balance</th>
<th>Added By</th>
<th>Action</th>
</thead>
<tbody>
....
</tbody>
我的JavaScript：
// The plugin function for adding a new filtering routine
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex){
var dateStart = parseDateValue($("#min").val());
var dateEnd = parseDateValue($("#max").val());
// aData represents the table structure as an array of columns, so the script accesses the date value
// in the second column of the table via aData[1]
var evalDate= parseDateValue(aData[1]);
if (evalDate >= dateStart && evalDate <= dateEnd) {
return true;
}
else {
return false;
}
});
$(document).ready(function(){
var oTable = $('#datatable').dataTable({
});
$('#min,#max').datepicker({
dateFormat: "yy-mm-dd",
showOn: "button",
buttonImageOnly: "true",
buttonImage: "datepicker.png",
weekStart: 1,
changeMonth: "true",
changeYear: "true",
daysOfWeekHighlighted: "0",
autoclose: true,
todayHighlight: true
});
// Add event listeners to the two range filtering inputs
$('#min,#max').change(function(){ oTable.fnDraw(); });
});
