我在我的MVC应用程序中使用Jquery DataTable。我想使用Date-Range过滤DataTable中的数据。当页面加载时,我从DB获取所有数据。所以我需要在客户端的DataTable的一列中实现这个日期范围过滤器。我尝试了以下编码,但日期没有过滤。
HTML表:
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>From Date:</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>To Date:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody>
</table>
<table id="Billing">
<thead>
<tr>
<th>Select</th>
<th>Company Name</th>
<th>Amount</th>
<th>Invoice Date</th>
<th>Status</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td><input type="checkbox" value=@item.companyId /></td>
<td> @item.CompanyName </td>
<td> @item.TotalAmount </td>
<td> @item.InvoiceDate </td>
<td> @item.Status </td>
<td> @item.Notes </td>
</tr>
}
</tbody>
</table>
jquery DataTable Initialize:
<script>
$(document).ready(function () {
$("#min").datepicker();
$("#max").datepicker();
var table = $('#Billing').dataTable(
{
"aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
"iDisplayLength": 10
}).columnFilter({
sPlaceHolder: "head",
aoColumns: [null, null, null, { "type": "date-range" }, null, null]
});
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup(function () {
table.draw();
});
});
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var dateMin = $('#min').attr("value");
var dateMax = $('#max').attr("value");
dateMin = dateMin.substring(0, 4) + dateRange.substring(5, 7) + dateRange.substring(8, 10);
dateMax = dateMax.substring(13, 17) + dateRange.substring(18, 20) + dateRange.substring(21, 23);
var date = aData[3];
// remove the time stamp out of my date
// 2010-04-11 20:48:22 -> 2010-04-11
date = date.substring(0, 10);
// remove the "-" characters
// 2010-04-11 -> 20100411
date = date.substring(0, 4) + date.substring(5, 7) + date.substring(8, 10)
// run through cases
if (dateMin == "" && date <= dateMax) {
return true;
}
else if (dateMin == "" && date <= dateMax) {
return true;
}
else if (dateMin <= date && "" == dateMax) {
return true;
}
else if (dateMin <= date && date <= dateMax) {
return true;
}
// all failed
return false;
}
);
</script>