使用DatePicker筛选DataTable
Use DatePicker to filter DataTable
我的页面中有一个名为"search_table"的DataTable。我在表中有一个额外的标题行，它有不同的筛选选项（下拉列表、文本、日期选择器）。对于日期列，我有两个日期选择器，一个用于最小值，另一个用于最大值。我可以根据日期选择器过滤数据表的数据，但有一个问题：
当我选择一个日期时，表中的所有行都会消失，我必须单击其中一个标题（比如对数据进行排序）才能显示数据。一旦我这样做，就会显示正确的数据（日期介于最小值和最大值之间）。
我使用什么功能来强制数据选择器重新绘制表格？在我的就绪功能中，我有以下代码：
$(document).ready(function() {
var table = $('#search_table').DataTable();
$(".datepicker").datepicker( {
maxDate:0,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
onClose: function(selectedDate) {
table.draw();}});
$('#min_create, #max_create, #min_update, #max_update').keyup(function() { table.draw(); });
$('#min_create, #max_create, #min_update, #max_update').click( function() { table.draw(); });
$('#min_create').datepicker().bind('onClose', function(){ table.draw(); });
});
mincreate、maxcreate、min_update和max_update都是具有日期选择器类的输入。search_table是我的表，它是一个DataTable。
我从这个jsfiddle得到了另一个选择https://jsfiddle.net/bindrid/2bkbx2y3/6/
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#min').datepicker("getDate");
var max = $('#max').datepicker("getDate");
var startDate = new Date(data[4]);
if (min == null && max == null) { return true; }
if (min == null && startDate <= max) { return true;}
if(max == null && startDate >= min) {return true;}
if (startDate <= max && startDate >= min) { return true; }
return false;
}
我有两个问题，修复后解决了我的问题。
在我的准备功能中，我有
var table = $('#search_table').DataTable();
这应该是
var table = $('#search_table').dataTable();
然后，在日期选择器类的代码中，我有
$(".datepicker").datepicker( {
maxDate:0,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
onClose: function(selectedDate) {
table.draw();}});
需要改为
$(".datepicker").datepicker( {
maxDate:0,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
onClose: function(selectedDate) {
table.fnDraw();}});
大家好，请查收附件中我的代码以供参考，以处理日期范围选择器来筛选数据表，这将对其他正在努力寻找类似解决方案的人有所帮助。以下是许多日期选择器问题的通用解决方案，请找到我所附的代码以供参考。
/*named as styles.css in link tag in html save it the same way to get the result */
#calendar{
position: center;
margin-top: 200px;
}
#tabledata{
margin-top:50px;
margin-right: 120px;
margin-left: 120px;
}<html>
<head>
<title>Search date from table</title>
<!-- data table -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<!-- date range picker -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- #region datatables files -->
<!-- <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
--><script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="calender" align="center">
<div id="reportrange" class="btn btn-success btn-lg" align="center">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
</div>
<div id="tabledata">
<table id="example" class="display" width="100%"></table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
var start = moment("2019-01-01 12:34:16");
var end = moment("2020-03-03 10:08:07");
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);//date rangepicker ends here
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
var start = picker.startDate;
var end = picker.endDate;
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = start;
var max = end;
var startDate = new Date(data[4]);
if (min == null && max == null) {
return true;
}
if (min == null && startDate <= max) {
return true;
}
if (max == null && startDate >= min) {
return true;
}
if (startDate <= max && startDate >= min) {
return true;
}
return false;
}
); //external search ends here
table.draw();
$.fn.dataTable.ext.search.pop();
}); // report range ends here
var table = $('#example').DataTable({
"order": [
[0, "desc"]
],
lengthChange: false,
data: dataSet,
columns: [{
title: "Name"
},
{
title: "Position"
},
{
title: "Office"
},
{
title: "Extn"
},
{
title: "Start date"
},
{
title: "Salary"
},
]
}); //table var ends here
});// ready function ends here
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2019/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2019/07/25", "$170,750" ],
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562","2020/01/12", "$86,000" ],
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2020/08/06", "$137,500" ],
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2020/09/15", "$205,500" ],
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2020/12/18", "$313,500" ],
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
[ "Michael Silva", "Marketing Designer", "London", "1581", "2020/11/27", "$198,500" ],
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2020/04/10", "$237,500" ],
[ "Bradley Greer", "Software Engineer", "London", "2558", "2020/10/13", "$132,000" ],
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2020/09/26", "$217,500" ],
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2019/09/03", "$345,000" ],
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2020/06/25", "$675,000" ],
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2019/12/12", "$106,450" ],
[ "Doris Wilder", "Sales Assistant", "Sydney", "3023", "2010/09/20", "$85,600" ],
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2020/10/09", "$1,200,000" ],
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2019/06/07", "$206,850" ],
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2019/08/14", "$163,000" ],
[ "Michelle House", "Integration Specialist", "Sydney", "2769", "2019/06/02", "$95,400" ],
[ "Suki Burks", "Developer", "London", "6832", "2020/10/22", "$114,500" ],
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2019/05/07", "$145,000" ],
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2019/03/09", "$324,050" ],
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2020/12/09", "$85,675" ]
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
} );
} );
</script>
</body>
</html>enter code here $.fn.dataTableExt.afnFiltering.push(
function (oSettings, aData, iDataIndex) {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
if (dd < 10)
dd = '0' + dd;
if (mm < 10)
mm = '0' + mm;
today = mm + '/' + dd + '/' + yyyy;
var Min_temp = '';
var Max_temp = '';
if ($('input[name="datefilter"]').val() == '') {
Min_temp = '01/01/1980';
Max_temp = today;
} else {
var arr_date = $('input[name="datefilter"]').val().split("-");
Min_temp = arr_date[0].replace(' ', '');
Max_temp = arr_date[1].replace(' ', '');
}
var arr_min = Min_temp.split("/");
var arr_max = Max_temp.split("/");
var arr_date = aData[2].split("/");
var iMin = new Date(arr_min[2], arr_min[0], arr_min[1], 0, 0, 0, 0)
var iMax = new Date(arr_max[2], arr_max[0], arr_max[1], 0, 0, 0, 0)
var iDate = new Date(arr_date[2], arr_date[0], arr_date[1], 0, 0, 0, 0)
if (iMin == "" && iMax == "") {
return true;
}
else if (iMin == "" && iDate < iMax) {
return true;
}
else if (iMin <= iDate && "" == iMax) {
return true;
}
else if (iMin <= iDate && iDate <= iMax) {
return true;
}
return false;
}
);
这个是过滤器吗
$('input[name="datefilter"]').daterangepicker({
autoUpdateInput: false,
maxDate: today,
locale: {
cancelLabel: 'Borrar',
applyLabel: 'Aceptar',
daysOfWeek: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
monthNames: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']
}
});
相关文章：
- 使用AngularJS中的筛选器更新给定的表
- 淘汰搜索/筛选
- 用我的json数据填充JQuery DataTable
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- Angular JS Filter-通过3个复选框进行筛选
- DataTable按下键选择扩展/导航
- 使用下拉列表筛选列表(ul>li）
- 未捕获的类型错误:$(..）.dataTable不是函数
- timeago.js with datatable and PHP
- 使用KnockoutJS绑定的YUI DataTable
- 删除DataTable(1.10.8）后，删除的行将再次添加
- JQuery DataTable列筛选器-选择下拉筛选器
- 个别列筛选器在Datatable中不起作用
- 正在使用服务器端处理导出筛选的DataTable(CodeIgniter）
- DataTable-分页和筛选器don'不适用于JavaScript生成的表
- Datatable.js筛选问题
- Datatable-按日期范围筛选-未返回正确的结果
- Angular Datatable未使用列重新排序进行筛选
- 如何使datatable能够对选定的列进行筛选
- 使用DatePicker筛选DataTable
