0
私はJquery Datatable APIを使用してテーブルを作成しました。これはうまくいきました。また、jqueryコードを実装してテーブルの各列(最下部)にフィルタを配置しました。Jquery DataTable column Filter Datepicker
「開始日」という列があり、そのフィルタをユーザーの入力ではなく日付ピッカーにしたい場合は、それを手伝ってください。ここで
は私のコードです:
<script src="https://code.jquery.com/jquery-1.11.1.min.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">
<script type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search '+title+'" />');
});
// DataTable
var table = $('#example').DataTable({
"scrollCollapse": false,
"paging": true
}
);
$('#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();
}
});
});
});
</script>
<style>
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
tr.highlight {
background-color: blue !important;
}
</style>
<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>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start 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>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</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>$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>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</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>$372,000</td>
</tr>
</tbody>
</table>
、アメージング素晴らしい、素晴らしいに取り組んでいます!本当にありがとう ! – Sam
ハハおかげさまで、ありがとうございます。 –
こんにちは、私に助けていただければ幸いです。開始日と終了日の間のすべてのレコードをフィルタリングする日付範囲フィルタを作成する必要があります。これについての質問ですが、私が得た答えはそれを解決していませんでした、私は私が何を修正すべきか教えてください、私の質問です:http://stackoverflow.com/questions/42096331/jquery-datatables-date-range-filter/42099771?noredirect = 1#comment71374870_42099771 – Sam