jQuery 数据表日期过滤器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9773989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
datatables date filter
提问by Codded
I have one Date column, formatted '17/03/2012'.
我有一个日期列，格式为“17/03/2012”。
I would like to be able select a start and end date and if the 1 date column above is within this date range it will filter the column.
我希望能够选择开始和结束日期，如果上面的 1 日期列在此日期范围内，它将过滤该列。
Below is the code im using:
下面是我使用的代码：
Start Date: <input type="text" id="dateStart" name="dateStart" size="30">
End Date: <input type="text" id="dateend" name="dateend" size="30">
<script type="text/javascript" charset="utf-8">
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iFini = document.getElementById('dateStart').value;
var iFfin = document.getElementById('dateend').value;
var iStartDateCol = 2;
var iEndDateCol = 2;
iFini=iFini.substring(0,2) + iFini.substring(3,5)+ iFini.substring(6,10)
iFfin=iFfin.substring(0,2) + iFfin.substring(3,5)+ iFfin.substring(6,10)
var datofini=aData[iStartDateCol].substring(0,2) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(6,10);
var datoffin=aData[iEndDateCol].substring(0,2) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(6,10);
if ( iFini == "" && iFfin == "" )
{
return true;
}
else if ( iFini <= datofini && iFfin == "")
{
return true;
}
else if ( iFfin >= datoffin && iFini == "")
{
return true;
}
else if (iFini <= datofini && iFfin >= datoffin)
{
return true;
}
return false;
}
);
$(function() {
// Implements the dataTables plugin on the HTML table
var $oTable= $("#example").dataTable( {
"sDom": '<"top"><"clear">t<"bottom"i><"clear">',
"iDisplayLength": 20,
"oLanguage": {
"sLengthMenu": 'Show <select><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select>'
},
"bJQueryUI": true,
//"sPaginationType": "full_numbers",
"aoColumns": [
null,
null,
{ "sType": "date" }
]
});
$('#dateStart, #dateend').daterangepicker(
{
dateFormat: 'dd/mm/yy',
arrows: true
}
);
/* Add event listeners to the two range filtering inputs */
$('#dateStart').keyup( function() { oTable.fnDraw(); } );
$('#dateend').keyup( function() { oTable.fnDraw(); } );
/* Add event listeners to the two range filtering inputs */
$('#dateStart').change( function() { oTable.fnDraw(); } );
$('#dateend').change( function() { oTable.fnDraw(); } );
/* Add event listeners to the two range filtering inputs */
$('#name').keyup( function() { oTable.fnDraw(); } );
$('#name').change( function() { oTable.fnDraw(); } );
});
</script>
Any help advice on this would bve extremely helpful. Thanks in advance.
任何有关这方面的帮助建议都会非常有帮助。提前致谢。
回答by mbeasley
I think the example that's shown in the filter API pagewill do the trick:
我认为过滤器 API 页面中显示的示例可以解决问题：
$(document).ready(function() {
var oTable = $('#example').dataTable();
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
} );
What the range filtering extension you've included up above is looking for is a set of input boxes (probably datepicker style textboxes would work best). You should give them the ID's, by what I see in your code, dateStartand dateend. Then you can bind function() { oTable.fnDraw(); }to some event on either of those boxes ( like in the code above, they're bound to the keyupevent) or it could be a filter button or whatever.
您上面包含的范围过滤扩展正在寻找一组输入框（可能日期选择器样式的文本框效果最好）。您应该根据我在您的代码中看到的内容给他们 ID，dateStart并且dateend. 然后您可以绑定function() { oTable.fnDraw(); }到这些框中的任何一个上的某个事件（如上面的代码中，它们绑定到keyup事件）或者它可以是过滤器按钮或其他任何东西。
But now, each time that the table is drawn (using fnDraw()) it will take into account those dates and filter your zero-based iStartDateColand iEndDateColcolumns based on that range.
但是现在，每个表绘制时间（使用fnDraw()），它会考虑到这些日期和筛选从零开始iStartDateCol，并iEndDateCol基于该范围的列。
UPDATE: a more direct answer- just include the following in your document.ready function:
更新：更直接的答案- 只需在您的 document.ready 函数中包含以下内容：
$('#dateStart').keyup( function() { oTable.fnDraw(); } );
$('#dateend').keyup( function() { oTable.fnDraw(); } );
回答by Hemant
If you want to filter a DataTable based on a date-range, you can try this function :
如果您想根据日期范围过滤 DataTable，您可以试试这个函数：
https://github.com/hemantrai88/datatables-date_range_filter
https://github.com/hemantra88/datatables-date_range_filter
It is really simple to customize this function to make it work for different date-formats.
自定义此功能以使其适用于不同的日期格式非常简单。
回答by Daria
I found a solution without using any plugin (I used this also to filter table by a keyword)
我找到了一个不使用任何插件的解决方案（我也用它来按关键字过滤表）
function filterTableByDateRange(table) {
var id = table.attr("id");
// I added class dt to a date-column of table
var dates = ($('#' + id + ' td.dt').map(function () {
return new Date($(this).text());
}).get());
//Here we init min and max date to be filtered with, if start date or end date is unset we set it to min and max existing dates of our table respectively
var minSearchDate = $('#date_search_from').val()
? new Date($('#date_search_from').val())
: new Date(Math.min.apply(null, dates));
var maxSearchDate = $('#date_search_to').val()
? new Date($('#date_search_to').val())
: new Date(Math.max.apply(null, dates));
var allRows = $("#" + id + " tbody").find("tr");
if (this.value == "") {
allRows.show();
return;
}
allRows.hide();
allRows.filter(function (i, v) {
var currDate = new Date($(this).find(".dt").html());
if (currDate.setHours(0, 0, 0, 0) >= minSearchDate.setHours(0, 0, 0, 0) &&
currDate.setHours(0, 0, 0, 0) <= maxSearchDate.setHours(0, 0, 0, 0)) {
return true;
}
return false;
}).show();
}
