【发布时间】：2018-01-22 16:20:46
【问题描述】：
试图让这个代码在 sn-p 中工作。我可以拉起初始数据表，但是当我使用 daterangepicker 时，数据表变为空白。现在我有 //console.log(test); & // console.log(test2);已注释掉，但它以正确的格式输出正确的日期范围。我也有 //console.log(min); //console.log(max);注释掉了这个但是返回正确的日期范围但是太多次。不知道那里发生了什么。任何帮助将不胜感激！
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
$(function() {
var start = moment().subtract(6, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
}
$('#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);
cb(start, end);
});
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
var test= picker.startDate.format('YYYY-MM-DD');
var test2= picker.endDate.format('YYYY-MM-DD');
// console.log(test);
// console.log(test2);
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min =test;
var max =test2;
var date = parseFloat( data[1] ) || 0; // use data for the age column
//console.log(min);
//console.log(max);
if (
(min == "" || max == "") ||
(moment(date).isSameOrAfter(min) && moment(date).isSameOrBefore(max))
) {
return true;
}
return false;
}
);
let table = $('#dataTables-example').DataTable();
table.draw();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/css/tether.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<table id="example" class="display table" cellspacing="0" width="100%">
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
<span></span> <b class="caret"></b>
</div>
<table width='100%' class='table table-striped table-bordered table-hover' id='dataTables-example'>
<thead>
<tr>
<th>Name</th>
<th>date</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>2018/01/15</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>2018/01/05</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>2018/01/16</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>2018/01/19</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>2018/1/02</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>2017/12/29</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>2018/01/06</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>$137,500</td>
</tr>
</tbody>
</table>【问题讨论】：
标签： javascript jquery datatables daterangepicker