jquery - 使用 daterangepicker 过滤数据表

Question

我正在为我的项目使用具有相同表格格式的 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 对数据表进行排序。

Answer 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 中，您可以得到 fromdate-todate，之后，您可以拆分 DateRange 并在数据库中的查询之间应用。