Javascript 如何在Datatable中按范围筛选日期？

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

我已经尝试了一些基于谷歌搜索、stackoverflow和datatable论坛的建议。但它不起作用

我不知道为什么afnfilter函数没有。我已经用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>

$(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;
        }
    );
});

{
  "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>"
    ]
  ],      
}

皮利·唐加尔·穆莱
皮利·唐加尔·阿基尔
不
佩克杰酒店
日期
阿拉善批准/拒绝
行动

Javascript:

<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>

$(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;
        }
    );
});

{
  "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>"
    ]
  ],      
}

$（文档）.ready（函数（）{
var表=$（“#待定报告”）.DataTable({
阿贾克斯：{
网址：“
dom:'lBfrtip'，
按钮：[
“csv”、“excel”、“打印”
],
});
//开始日期的日期选择器
$（“tanggal_mulai”）。日期选择器({
变化月：对，
变化年：是的，
格式：“dd-mm-yyyy”，
onSelect：功能（日期）{
minDateFilter=新日期（Date）.getTime（）；
表1.draw（）
}
}).keyup（函数（）{
minDateFilter=新日期（this.value）.getTime（）；
table.draw（）；
});
//结束日期的日期选择器
$（“tanggal_akhir”）。日期选择器({
变化月：对，
变化年：是的，
格式：“dd-mm-yyyy”，
onSelect：功能（日期）{
maxDateFilter=新日期（Date）.getTime（）；
表1.draw（）
}
}).keyup（函数（）{
maxDateFilter=新日期（this.value）.getTime（）；
table.draw（）；
});
minDateFilter=“”；
maxDateFilter=“”；
//此函数未运行
$.fn.dataTable.ext.afnFiltering.push(
功能（oSettings、aData、iDataIndex）{
警报（‘AAAA’）；
如果（数据类型.\u日期=='未定义'）{
aData._date=new date（aData[2]）.getTime（）；//aData[2]，因为它在第3列中
}
if（minDateFilter&！isNaN（minDateFilter））{
if（数据日期maxDateFilter）{
返回false；
}
}
返回true；
}
);
});

JSON响应：

<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>

$(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;
        }
    );
});

{
  "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>"
    ]
  ],      
}

{
“数据”：[
[
1.
"111",
"13-05-2020 09:43:51",
无效的
“批准或拒绝”
],
[
2.
"110",
"12-05-2020 07:47:13",
无效的
“批准或拒绝”
],
[
3.
"109",
"11-05-2020 07:00:43",
无效的
“批准或拒绝”
]
],      
}

日期列值是PHP中的

d-m-Y H:i:s

格式，我想通过javascript使用

dd-mm-yyyy

格式对其进行过滤。 这把小提琴是我的灵感

请告诉我，我被困了两个星期。

---

向上

你也能分享你的代码吗？谢谢！完成了。我在@norbitrial修改了它。你也能分享你的代码吗？谢谢！完成了。我在@norbitrial修改了它