使用 daterangepicker 过滤数据表
Posted
技术标签:
【中文标题】使用 daterangepicker 过滤数据表【英文标题】:Filtering datatables using daterangepicker 【发布时间】:2018-09-11 08:26:51 【问题描述】:我正在为我的项目使用具有相同表格格式的 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 的数据以及如何过滤我的数据表感到困惑。
由于数据表已经有搜索分页和表的另一个扩展,我如何使用 daterangepicker 对我的数据表进行过滤,并根据选择的 datepicker 对我的数据表进行排序。
【问题讨论】:
您使用的是daterangepicker.com 或jqueryui.com/datepicker? @DPS 我正在使用 daterangepicker.com 您是对静态数据还是动态数据应用过滤器? @SanyamiVaidya 动态数据 【参考方案1】:你可以试试这个用于服务器端搜索,
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
,你得到从日期到现在,
之后,您可以拆分 DateRange 并在数据库中的查询之间应用。
【讨论】:
以上是关于使用 daterangepicker 过滤数据表的主要内容,如果未能解决你的问题,请参考以下文章