如何使用单个Daterange Picker筛选数据表

时间:2019-02-11 22:39:58

标签: php jquery mysql filter datatables

我想通过单个日期范围选择器来过滤我的数据表,但不起作用。如何解决?

This is My Page Screenshot I Adapted the code From this Source, But in this code using two input tag

在我的代码中,我想使用单个日期选择器过滤我的数据表,我可以使用两个标签输入过滤数据表,但是我不知道如何使用具有两个值的单个datepicker过滤:日期从(min)和日期到(最多)...这是我的代码:

<div class="input-group input-daterange ">
    <button type="button" class="btn btn-default pull-right date-range-filter" id="daterange-btn">
        <span>
           <i class="fa fa-calendar"></i>
        </span>
            <i class="fa fa-caret-down"></i>
    </button>
</div>

<table id="tableku" class=" table table-bordered table-striped"> <!-- my table tag. -->

<script type="text/javascript">
    $(document).ready(function() {
       table= $('#tableku').DataTable( {
            dom: 'Bfrtip',
            buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
        } );

        var start = moment();
        var end = moment();

        function cb(start, end) {
            $('#daterange-btn span').html(start.format('DD MMMM YYYY') + ' - ' + end.format('DD MMMM YYYY'));
            alert(start.format('DD MMMM YYYY')+ ' - ' + end.format('DD MMMM YYYY')); /*Get The Value from my datepicker*/
        }
         $.fn.dataTable.ext.search.push(
                  function(settings, data, dataIndex) {
                    var min = start.format('YYYY-MM-DD');
                    var max = end.format('YYYY-MM-DD');
                    var createdAt = data[1] || 0; // my date column in the table
                    if (
                      (min == "" || max == "") ||
                      (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
                    ) {
                      return true;
                    }
                    return false;
                  }
                );
             // Re-draw the table when the a date range filter changes
                $('.date-range-filter').change(function() {
                  table.draw();
                });
                $('#my-table_filter').hide();

        $('#daterange-btn').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
               'Today': [moment(), moment()],
               'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
               'Last 7 Days': [moment().subtract(6, 'days'), moment()],
               'Last 30 Days': [moment().subtract(29, 'days'), moment()],
               'This Month': [moment().startOf('month'), moment().endOf('month')],
               'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, cb);
        cb(start, end);
    } );
</script>

0 个答案:

没有答案