使用 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 过滤数据表的主要内容,如果未能解决你的问题,请参考以下文章

如何使用数据表实现 Daterangepicker?

日期时间范围选择插件:daterangepicker使用总结

Daterangepicker更改angularjs

关于daterangepicker的配置

daterangepicker 使用说明+参数详解

daterangepicker 使用方法总结