我正在为我的项目使用具有相同表格格式的 AdminLTE 模板。
如果我将 daterangepicker 添加到我的 html 中，如何过滤我的数据表？
这是我的代码:
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Access Log View</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class=" col-xs-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-left" id="findDate">
</div>
<!-- /.input group -->
</div>
</div>
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>User</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>23/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>22/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>21/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>20/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>24/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>24/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>24/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>24/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>24/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>24/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
<tr>
<td>24/03/2018</td>
<td>UserOne</td>
<td>reksa@gmail.com</td>
<td>Login</td>
</tr>
</tbody>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
<!-- /.box -->
@section Scripts {
<script>
$(function () {
$('#example2').DataTable({
'paging': true,
'lengthChange': false,
'searching': true,
'ordering': false,
'info': true,
'autoWidth': false
})
});
//Date range picker
$('#findDate').daterangepicker();
</script>
}
我仍然对获取日期范围选择器的数据以及如何过滤数据表感到困惑。
由于数据表已经具有搜索分页和表的另一个扩展，因此如何使用 daterangepicker 与我的数据表进行过滤，并根据所选的 datepicker 对数据表进行排序。
最佳答案
您可以尝试使用此方法进行服务器端搜索，
HTML:
<input type="text" class="form-control pull-left" id="findDate">
<button type="button" id="btnFilter" class="btn btn-default">Search</button>
JS:
$(document).ready(function () {
bindGrid('');
$("#btnFilter").click(function () {
var parameters = $('#findDate').val();
bindGrid(parameters);
});
});
function bindGrid(parameters) {
$('#example2').DataTable({
"sAjaxSource": "URL",
"fnServerParams": function (aoData) {
aoData.push({ "name": "DateRange", "value": parameters });
perm = aoData;
},
'paging': true,
'lengthChange': false,
'searching': true,
'ordering': false,
'info': true,
'autoWidth': false
})
});
}
在 DateRange 中，您可以得到 fromdate-todate，
之后，您可以拆分 DateRange 并在数据库中的查询之间应用。
关于jquery - 使用 daterangepicker 过滤数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49605883/