下面的代码运行良好,但我需要添加一个新功能,以允许用户根据开始日期和结束日期筛选一系列记录,用户应该能够获得其间的所有记录,我能够找到一个数据表页面教程来实现这一点,但我无法将其添加到代码中,您能帮帮我吗,这里是链接
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" width="100%">
<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>
3条答案
按热度按时间wsxa1bj11#
ql3eal8s2#
在构建表格之后,您应该能够将这些代码放在javascript中的任何位置。
你只需要像这样修改这些行:
wecizke33#
我不知道是否有用但我会照你说的做
Here more explanation. The $.fn.DataTable.ext.search it's the API provided for Datatables to extend the functions of filtering. First there is an array wich has the names of the tables who has to apply the function below (this is in case there is more than one table on the same page), then gets the value from de datepickers and split for create another Date who has the same format in the three cases (From, To and StartDate). Then compares that dates between them and filter as appropiate. The StartDate is from the current record of the Table.
在datepickers中,我添加了类date-range-filter