【发布时间】:2018-08-08 12:21:44
【问题描述】:
下面是我写的代码。在这里,我正在做的是基于从引导 datetimepickers 中选择的开始日期和结束日期,我正在过滤表行。但我不知道,这里没有发生搜索!!!...我在下面的代码中做错了什么
$(function() {
var table = $('#example').DataTable();
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = $('#mindate').val();
var max = $('#maxdate').val();
var startDate = new Date(data[1]);
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;
}
);
$("#mindate").on({
onSelect: function() {
table.draw();
},
});
$("#mindate").on({
onSelect: function() {
table.draw();
},
});
$('#mindate, #mindate').change(function() {
table.draw();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.2/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="col-xs-6 selectpicker form-group">
<label>From Date:</label>
<div class='input-group date' id="datetimepicker1">
<input type='text' class="form-control" id="mindate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6 selectpicker form-group">
<label>To Date:</label>
<div class='input-group date' id="datetimepicker2">
<input type='text' class="form-control" id="maxdate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>From Date</th>
<th>To Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018-08-10 20:13:22</td>
<td>2018-08-12 20:13:22</td>
</tr>
<tr>
<td>2018-08-8 20:13:22</td>
<td>2018-08-9 20:13:22</td>
</tr>
<tr>
<td>2018-08-15 20:13:22</td>
<td>2018-08-16 20:13:22</td>
</tr>
<tr>
<td>2018-08-4 20:13:22</td>
<td>2018-08-5 20:13:22</td>
</tr>
</tbody>
</table>
对于参考检查以下链接Filtering data programatically
代码$.fn.dataTable.ext.search.push()是过滤功能,不起作用,意味着搜索没有发生!!!
【问题讨论】:
-
“此代码不起作用”是什么意思?它做什么/不做什么?
-
@KIRANKUMAR 在您提出问题 2 分钟后说紧急(即使是变相)不会让帮助更快地发生。见meta.stackoverflow.com/q/326569。最好让你的问题更清楚。见绿巨人的评论。
-
上面的 javascript 代码是错误的...我正在尝试使用 datetimepicker 过滤日期和时间...
-
@KIRANKUMAR 我已经编辑了您的问题,请批准该编辑,所以 SO Guys 会知道您要做什么!!!
标签: javascript jquery twitter-bootstrap-3 datatables bootstrap-datetimepicker