如何在数据表中按范围过滤日期?

时间:2020-05-18 13:04:47

标签: javascript jquery datatables

我正在尝试过滤表中的列日期。我正在使用Datatable绘制表格。我表中的数据是从服务器发送的。

我已经尝试过一些基于Google搜索,stackoverflow和datatable论坛的建议。但这没用。

我不知道为什么afnFiltering函数没有。我用console.log检查了它,但没有打印出来。

到目前为止,这是我的工作:

HTML:

<div class="form-group row">
    <label class="col-md-2">Pilih Tanggal Mulai</label>
    <div class="col-md-3">
        <input type="text" id="tanggal_mulai" name="tanggal_mulai" class="form-control tanggal">
    </div>
</div>
<!-- End Date -->
<div class="form-group row">
    <label class="col-md-2">Pilih Tanggal Akhir</label>
    <div class="col-md-3">
        <input type="text" id="tanggal_akhir" name="tanggal_akhir" class="form-control tanggal">
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table id="tbl-reporting" class="table table-bordered table-striped dt-responsive" width="100%">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>ID Pekerjaan</th>
                        <th>Date</th>
                        <th>Alasan Approve/Reject</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

Javascript:

$(document).ready(function () {
    var table = $("#tbl-reporting").DataTable({
        ajax: {
            url: "<?php echo site_url('controller/method') ?>"
             dom: 'lBfrtip',
            buttons: [
                'csv', 'excel', 'print'
            ],
        });
    //datepicker for start date
    $("#tanggal_mulai").datepicker({
        changeMonth: true,
        changeYear: true,
        format: "dd-mm-yyyy",
        onSelect: function (date) {
            minDateFilter = new Date(date).getTime();
            table.draw()
        }
    }).keyup(function () {
        minDateFilter = new Date(this.value).getTime();
        table.draw();
    });
    //datepicker for end date
    $("#tanggal_akhir").datepicker({
        changeMonth: true,
        changeYear: true,
        format: "dd-mm-yyyy",
        onSelect: function (date) {
            maxDateFilter = new Date(date).getTime();
            table.draw()
        }
    }).keyup(function () {
        maxDateFilter = new Date(this.value).getTime();
        table.draw();
    });
    minDateFilter = "";
    maxDateFilter = "";
    //this function didn't run
    $.fn.dataTable.ext.afnFiltering.push(
        function (oSettings, aData, iDataIndex) {
            alert('AAAAA');
            if (typeof aData._date === 'undefined') {
                aData._date = new Date(aData[2]).getTime(); //aData[2] because it's in 3rd column
            }
            if (minDateFilter && !isNaN(minDateFilter)) {
                if (aData._date < minDateFilter) {
                    return false;
                }
            }
            if (maxDateFilter && !isNaN(maxDateFilter)) {
                if (aData._date > maxDateFilter) {
                    return false;
                }
            }
            return true;
        }
    );
});

JSON响应:

{
  "data": [
    [
      1,
      "111",
      "13-05-2020 09:43:51",
      null,
      "Approve</span></a> Reject </span></a>"
    ],
    [
      2,
      "110",
      "12-05-2020 07:47:13",
      null,
      "Approve </span></a> Reject </span></a>"
    ],
    [
      3,
      "109",
      "11-05-2020 07:00:43",
      null,
      "Approve </span></a> Reject </span></a>"
    ]
  ],      
}

日期列的值是PHP的d-m-Y H:i:s格式,我想用dd-mm-yyyy格式的javascript过滤它。 这个小提琴是我的灵感http://jsfiddle.net/41jr8xgo/5/

请赐教。被困了2周。 Up up up Up

0 个答案:

没有答案
相关问题