Jquery 数据表日期范围过滤器
Posted
技术标签:
【中文标题】Jquery 数据表日期范围过滤器【英文标题】：Jquery Datatables Date Range Filter 【发布时间】：2017-06-25 01:54:56 【问题描述】：下面的代码运行良好，但我需要添加一个新功能，以允许用户根据开始日期和结束日期过滤一系列记录，用户应该能够获取介于两者之间的所有记录，我能够找到一个数据表页面教程来实现这个，但我无法将它添加到代码中，你能帮我吗，这是链接
https://datatables.net/plug-ins/filtering/row-based/range_dates
$(document).ready(function()
$(function()
$("#datepickerStart").datepicker();
$("#datepickerEnd").datepicker();
);
// Setup - add a text input to each footer cell
$('#example tfoot th').each(function()
var title = $(this).text();
if (title === "Start date")
$(this).html('<input type="text" id="datepickerStart" placeholder="Search ' + title + '" />');
else if (title === "End date")
$(this).html('<input type="text" id="datepickerEnd" placeholder="Search ' + title + '" />');
else
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
);
// DataTable
var table = $('#example').DataTable(
);
$('#example tbody').on('click', 'tr', function()
$(this).toggleClass('selected');
);
$('#example tbody')
.on('mouseenter', 'td', function()
var colIdx = table.cell(this).index().column;
$(table.cells().nodes()).removeClass('highlight');
$(table.column(colIdx).nodes()).addClass('highlight');
);
$('#button').click(function()
alert(table.rows('.selected').data().length + ' row(s) selected');
);
// Apply the search
table.columns().every(function()
var that = this;
$('input', this.footer()).on('keyup change', function()
if (that.search() !== this.value)
that
.search(this.value)
.draw();
);
);
);tfoot input
width: 100%;
padding: 3px;
box-sizing: border-box;
tr.highlight
background-color: blue !important;
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.13/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>End date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th id="min">Start date</th>
<th id="max">End date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>2011/04/27</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>2011/04/29</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>2011/04/28</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>2012/03/30</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>2008/11/30</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>2012/12/21</td>
<td>$372,000</td>
</tr>
</tbody>
</table>【问题讨论】：
【参考方案1】： <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.13/filtering/row-based/range_dates.js"></script>
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.13/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" >
$(document).ready(function()
$( function()
$( "#datepickerStart" ).datepicker();
$( "#datepickerEnd" ).datepicker();
);
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function ()
var title = $(this).text();
if (title === "Start date")
$(this).html( '<input type="text" id="datepickerStart" placeholder="Search '+title+'" />' );
else if (title === "End date")
$(this).html( '<input type="text" id="datepickerEnd" placeholder="Search '+title+'" />' );
else
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
);
// DataTable
var table = $('#example').DataTable(
$('#min').keyup( function() table.draw(); );
$('#max').keyup( function() table.draw(); );
);
var iFini = document.getElementById('datepickerStart').value;
var iFfin = document.getElementById('datepickerEnd').value;
var iStartDateCol = 4;
var iEndDateCol = 5;
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex )
var iFini = document.getElementById('fini').value;
var iFfin = document.getElementById('ffin').value;
var iStartDateCol = 6;
var iEndDateCol = 7;
iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);
var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);
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;
);
$('#example tbody').on( 'click', 'tr', function ()
$(this).toggleClass('selected');
);
$('#example tbody')
.on( 'mouseenter', 'td', function ()
var colIdx = table.cell(this).index().column;
$( table.cells().nodes() ).removeClass( 'highlight' );
$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
);
$('#button').click( function ()
alert( table.rows('.selected').data().length +' row(s) selected' );
);
// Apply the search
table.columns().every( function ()
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function ()
if ( that.search() !== this.value )
that
.search( this.value )
.draw();
);
);
);
</script>
<style>
tfoot input
width: 100%;
padding: 3px;
box-sizing: border-box;
tr.highlight
background-color: blue !important;
</style>
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>End date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th id="min">Start date</th>
<th id="max">End date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>2011/04/27</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>2011/04/29</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>2011/04/28</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>2012/03/30</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>2008/11/30</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>2012/12/21</td>
<td>$372,000</td>
</tr>
</tbody>
</table>
【讨论】：
谢谢，你能加载那个 html 页面吗？我只是复制/粘贴了您的代码，但页面没有为我加载...【参考方案2】：构建表格后，您应该能够将该代码放在 javascript 中的任何位置。
您只需像这样更改这些行：
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex )
var iFini = document.getElementById('datepickerStart').value;
var iFfin = document.getElementById('datepickerEnd').value;
var iStartDateCol = 4;
var iEndDateCol = 5;
iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);
var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);
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;
);
【讨论】：
您好，我已经添加了代码和您的行以及该插件的cdn，但是页面加载不正确，请参见下面的完整代码 该代码位于以下位置：function( oSettings, aData, iDataIndex ) 查看更新后的答案。【参考方案3】：
我不知道是否有帮助，但我会按照你的要求做这样的事情
编辑
这里有更多解释。 $.fn.DataTable.ext.search 是为Datatables提供的API，用于扩展过滤功能。首先有一个数组，其中包含必须应用以下函数的表的名称（这是在同一页面上有多个表的情况下），然后从 de datepickers 获取值并拆分以创建另一个 Date 谁在三种情况下（From、To 和 StartDate）具有相同的格式。然后比较它们之间的日期并根据需要进行过滤。 StartDate 来自表的当前记录。
在 datepickers 我添加了类 date-range-filter
var allowFilter = ['tableOT'];
$('.date-range-filter').change(function()
oTable.draw();
);
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex)
// check if current table is part of the allow list
if ( $.inArray( settings.nTable.getAttribute('id'), allowFilter ) == -1 )
// if not table should be ignored
return true;
var min = $("#<%=txtFechaDesde.ClientID %>").val();
var max = $("#<%=txtFechaHasta.ClientID %>").val();
var fromDate;
var toDate;
// need to change str order before making date obect since it uses a new Date("mm/dd/yyyy") format for short date.
var d = data[0].split("/");
var startDate = new Date(d[1]+ "/" + d[0] +"/" + d[2]);
if(min != "")
var fd = min.split("/");
fromDate = new Date(fd[1]+ "/" + fd[0] +"/" + fd[2]);
if(max != "")
var td = max.split("/");
toDate = new Date(td[1]+ "/" + td[0] +"/" + td[2]);
if (fromDate == null && toDate == null) return true;
if (fromDate == null && startDate <= toDate) return true;
if(toDate == null && startDate >= fromDate) return true;
if (startDate <= toDate && startDate >= fromDate) return true;
return false;
);
【讨论】：
您能提供更多解释吗？以上是关于Jquery 数据表日期范围过滤器的主要内容，如果未能解决你的问题，请参考以下文章