数据表日期过滤器 [英] datatables date filter
问题描述
我希望能够选择开始和结束日期，如果1日期上面的列在此日期范围内，将过滤列。
以下是使用代码im：
开始日期：< input type =textid =dateStartname =dateStartsize =30>
结束日期：< input type =textid =dateendname =dateendsize =30>
< script type =text / javascriptcharset =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（i Fini< = datofini&&& iFfin ==）
{
return true;
}
else if（iFfin> = datoffin&& iFini ==）
{
return true;
}
else if（iFini< = datofini&& iFfin> = datoffin）
{
return true;
}
返回false;
}
）;
$（function（）{
//实现HTML表上的dataTables插件
var $ oTable = $（＃example）。dataTable（{
sDom：'<top><clear> t<bottomi><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 ，
//sPaginationType：full_numbers，
aoColumns：[
null，
null，
{sType：date}
]
}）;
$（'＃dateStart，#dateend'）。daterangepicker（
{
dateFormat：'dd / mm / yy'，
箭头：true
}
）;
/ *向两个范围过滤输入添加事件侦听器* /
$（'＃dateStart'）。keyup（function（）{oTable.fnDraw（）; }）;
$（'＃dateend'）。keyup（function（）{oTable.fnDraw（）;}）;
/ *将事件侦听器添加到两个范围过滤输入* /
$（'＃dateStart'）。change（function（）{oTable.fnDraw（）;}）;
$（'＃dateend'）。change（function（）{oTable.fnDraw（）;}）;
/ *将事件侦听器添加到两个范围过滤输入* /
$（'＃name'）。keyup（function（）{oTable.fnDraw（）;}）;
$（'＃name'）。change（function（）{oTable.fnDraw（）;}）;
}）;
< / script>
有关这方面的帮助建议将非常有帮助。感谢提前。
我认为这个例子显示在过滤器API页面将会诀窍：
$（文件）.ready（function（）{
var oTable = $（'＃example'）。dataTable（）;
/ *将事件侦听器添加到两个范围过滤输入* /
$（'＃min'）。keyup（function（）{oTable.fnDraw（）;}）;
$（'＃max'）。keyup（function（）{oTable.fnDraw（） }）;
}）;
您上面包括的范围过滤扩展是寻找一组输入框（可能datepicker风格的文本框可以工作最好）。您应该通过代码中的 dateStart 和 dateend 给他们ID。然后你可以绑定 function（）{oTable.fnDraw（）; } 到这些框中的某个事件（如上面的代码中，它们绑定到 keyup 事件），或者它可以是过滤器按钮或任何。
但现在，每次绘制表时（使用 fnDraw（）），它将考虑到日期并根据该范围过滤基于零的 iStartDateCol 和 iEndDateCol 列。
更新：更直接的回答 - 只需在您的document.ready函数中包含以下内容：
$（'＃dateStart'）。keyup（function（）{oTable.fnDraw（）;}）;
$（'＃dateend'）。keyup（function（）{oTable.fnDraw（）;}）;
I have one Date column, formatted '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.
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.
I think the example that's shown in the filter API page will do the trick:
$(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, dateStart and 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 keyup event) or it could be a filter button or whatever.
But now, each time that the table is drawn (using fnDraw()) it will take into account those dates and filter your zero-based iStartDateCol and iEndDateCol columns based on that range.
UPDATE: a more direct answer - just include the following in your document.ready function:
$('#dateStart').keyup( function() { oTable.fnDraw(); } );
$('#dateend').keyup( function() { oTable.fnDraw(); } );
这篇关于数据表日期过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
