jQuery DataTables，让它与日期范围选择器一起使用 [英] jQuery DataTables, getting it to work with date range picker
本文介绍了jQuery DataTables，让它与日期范围选择器一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个jQuery DataTable，我在MM-DD-YYYY格式的第二列中得到了我的日期。我正在尝试使用我的日期范围选择器，因此我的数据表只显示选择器中范围内日期的行。
I've got a jQuery DataTable and I've got my dates in the second column in MM-DD-YYYY format. I'm trying to get my date range picker to work with it, so my datatable only shows rows with dates within the range in the picker.
表和日期范围选择器：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div class="col-md-8">
<div class="input-group input-daterange">
<input type="text" class="form-control date-range-filter" placeholder="Date Start" data-date-format="mm-dd-yyyy" id="min" />
<span class="input-group-addon">to</span>
<input type="text" class="form-control date-range-filter" placeholder="Date End" data-date-format="mm-dd-yyyy" id="max"/>
</div>
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Time</th>
<th></th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Name</td>
<td>06/06/2017</td>
<td>6:31:43 PM</td>
<td>CDT</td>
<td>All Systems Normal</td>
</tr>
<tr class="odd gradeX">
<td>Name</td>
<td>06/05/2017</td>
<td>1:22:33 PM</td>
<td>CDT</td>
<td><font color="red"> LOW Voltage</font></td>
</tr>
<tr class="odd gradeX">
<td>Name</td>
<td>06/04/2017</td>
<td>6:11:25 AM</td>
<td>CDT</td>
<td><font color="red">Main Power Failure</font></td>
</tr>
<tr class="odd gradeX">
<td>Name</td>
<td>06/03/2017</td>
<td>5:31:43 PM</td>
<td>CDT</td>
<td><font color="red">Main Power Failure <br> LOW DC Voltage</font></td>
</tr>
<tr class="odd gradeX">
<td>Name</td>
<td>06/02/2017</td>
<td>2:20:43 PM</td>
<td>CDT</td>
<td>All Systems Normal</td>
</tr>
<tr class="odd gradeX">
<td>Name</td>
<td>06/01/2017</td>
<td>3:50:21 AM</td>
<td>CDT</td>
<td><font color="red">Digital Input 1</font></td>
</tr>
</tbody>
</table>
</div>
我已经尝试过这段代码了，我似乎无法让它工作。我缺少什么？
I've tried this code, and I can't seem to get it to work. What am I missing?
// Bootstrap datepicker
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
// Extend dataTables search
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = $('#min').val();
var max = $('#max').val();
var createdAt = data[1] || 1; // Our date column in the table
if (
(min == "" || max == "") ||
(moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
) {
return true;
}
return false;
}
);
// Re-draw the table when the a date range filter changes
$('.date-range-filter').change(function() {
var table = $('#data-table').DataTable();
table.draw();
});
$('#data-table_filter').hide();
推荐答案
似乎对我来说像冠军一样！看看我的代码的jsFiddle。请注意，我在示例中添加了一些额外的插件，并且我处理了您在document.ready调用中编写的所有内容。
Seems to work like a champ for me! Have a look at my jsFiddle of your code. Note that I added a few additional plugins from what you had in your example, and that I handled everything you'd written inside of a document.ready call.
https://jsfiddle.net/zy914ko6/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script>
$(document).ready(function() {
// Bootstrap datepicker
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
// Extend dataTables search
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = $('#min').val();
var max = $('#max').val();
var createdAt = data[1] || 1; // Our date column in the table
if (
(min == "" || max == "") ||
(moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
) {
return true;
}
return false;
}
);
// Re-draw the table when the a date range filter changes
$('.date-range-filter').change(function() {
var table = $('#data-table').DataTable();
table.draw();
});
$('.date-range-filter').datepicker();
});
</script>
这篇关于jQuery DataTables，让它与日期范围选择器一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
