$.fn.dataTable.ext.search.push 在 on(change) jquery 内部不起作用答案

【问题标题】：$.fn.dataTable.ext.search.push not working inside of on(change) jquery$.fn.dataTable.ext.search.push 在 on(change) jquery 内部不起作用
【发布时间】：2019-06-12 21:52:52
【问题描述】：

我无法生成显示表格中选定日期选项的日期过滤器（HTML 中的选择框）（今天、昨天、过去 7 天、过去 30 天、过去 60 天和过去 90 天）。

$.fn.dataTable.ext.search.push 中的代码不知何故没有启动。请帮帮我！

Search Filter Image

$(document).ready(function () {
    $('#selectByDate').on('change', function () {
        var minDate = new Date();
        if (document.getElementById("selectByDate").value == "Today") {
            $("#maxInput").datepicker("setDate", minDate);
            $("#minInput").datepicker("setDate", minDate);
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var date1 = data[0].split(" ");
                    var date2 = date1[0].split("-");
                    var min = $('#minInput').datepicker("getDate");
                    var max = $('#maxInput').datepicker("getDate");
                    var startDate = new Date(date2[0], date2[1], date2[2]);
                    startDate.setMonth(startDate.getMonth() - 1);
                    if (min == null && max == null) { return true; }
                    else if (min == null && startDate <= max) { return true; }
                    else if (max == null && startDate >= min) { return true; }
                    else if (startDate <= max && startDate >= min) { return true; }
                    else { return false; }
                });
            $("#minInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            $("#maxInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

            $('#minInput, #maxInput').change(function () {
                table.draw();
            });

        } else if (document.getElementById("selectByDate").value == "Yesterday") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 1));
            $("#minInput").datepicker("setDate", minDate);
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var date1 = data[0].split(" ");
                    var date2 = date1[0].split("-");
                    var min = $('#minInput').datepicker("getDate");
                    var max = $('#maxInput').datepicker("getDate");
                    var startDate = new Date(date2[0], date2[1], date2[2]);
                    startDate.setMonth(startDate.getMonth() - 1);
                    if (min == null && max == null) { return true; }
                    else if (min == null && startDate <= max) { return true; }
                    else if (max == null && startDate >= min) { return true; }
                    else if (startDate <= max && startDate >= min) { return true; }
                    else { return false; }
                });
            $("#minInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            $("#maxInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

            $('#minInput, #maxInput').change(function () {
                table.draw();
            });

        } else if (document.getElementById("selectByDate").value == "Last 7 Days") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 7));
            $("#minInput").datepicker("setDate", minDate);
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var date1 = data[0].split(" ");
                    var date2 = date1[0].split("-");
                    var min = $('#minInput').datepicker("getDate");
                    var max = $('#maxInput').datepicker("getDate");
                    var startDate = new Date(date2[0], date2[1], date2[2]);
                    startDate.setMonth(startDate.getMonth() - 1);
                    if (min == null && max == null) { return true; }
                    else if (min == null && startDate <= max) { return true; }
                    else if (max == null && startDate >= min) { return true; }
                    else if (startDate <= max && startDate >= min) { return true; }
                    else { return false; }
                });
            $("#minInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            $("#maxInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

            $('#minInput, #maxInput').change(function () {
                table.draw();
            });

        } else if (document.getElementById("selectByDate").value == "Last 30 Days") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 30));
            $("#minInput").datepicker("setDate", minDate);
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var date1 = data[0].split(" ");
                    var date2 = date1[0].split("-");
                    var min = $('#minInput').datepicker("getDate");
                    var max = $('#maxInput').datepicker("getDate");
                    var startDate = new Date(date2[0], date2[1], date2[2]);
                    startDate.setMonth(startDate.getMonth() - 1);
                    if (min == null && max == null) { return true; }
                    else if (min == null && startDate <= max) { return true; }
                    else if (max == null && startDate >= min) { return true; }
                    else if (startDate <= max && startDate >= min) { return true; }
                    else { return false; }
                });
            $("#minInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            $("#maxInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

            $('#minInput, #maxInput').change(function () {
                table.draw();
            });

        } else if (document.getElementById("selectByDate").value == "Last 60 Days") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 60));
            $("#minInput").datepicker("setDate", minDate);
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var date1 = data[0].split(" ");
                    var date2 = date1[0].split("-");
                    var min = $('#minInput').datepicker("getDate");
                    var max = $('#maxInput').datepicker("getDate");
                    var startDate = new Date(date2[0], date2[1], date2[2]);
                    startDate.setMonth(startDate.getMonth() - 1);
                    if (min == null && max == null) { return true; }
                    else if (min == null && startDate <= max) { return true; }
                    else if (max == null && startDate >= min) { return true; }
                    else if (startDate <= max && startDate >= min) { return true; }
                    else { return false; }
                });
            $("#minInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            $("#maxInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

            $('#minInput, #maxInput').change(function () {
                table.draw();
            });

        } else if (document.getElementById("selectByDate").value == "Last 90 Days") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 90));
            $("#minInput").datepicker("setDate", minDate);
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var date1 = data[0].split(" ");
                    var date2 = date1[0].split("-");
                    var min = $('#minInput').datepicker("getDate");
                    var max = $('#maxInput').datepicker("getDate");
                    var startDate = new Date(date2[0], date2[1], date2[2]);
                    startDate.setMonth(startDate.getMonth() - 1);
                    if (min == null && max == null) { return true; }
                    else if (min == null && startDate <= max) { return true; }
                    else if (max == null && startDate >= min) { return true; }
                    else if (startDate <= max && startDate >= min) { return true; }
                    else { return false; }
                });
            $("#minInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            $("#maxInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

            $('#minInput, #maxInput').change(function () {
                table.draw();
            });
        }
    });
});

【问题讨论】：

标签： javascript jquery filter datatable

【解决方案1】：

首先你的代码有很多可以避免的重复数据。

$.fn.dataTable.ext.search.push 只需定义一次。

这是从 150 行到仅 50 行的较短版本。

$(document).ready(function () {

     $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var date1 = data[0].split(" ");
            var date2 = date1[0].split("-");
            var min = $('#minInput').datepicker("getDate");
            var max = $('#maxInput').datepicker("getDate");
            var startDate = new Date(date2[0], date2[1], date2[2]);
            startDate.setMonth(startDate.getMonth() - 1);
            if (min == null && max == null) { return true; }
            else if (min == null && startDate <= max) { return true; }
            else if (max == null && startDate >= min) { return true; }
            else if (startDate <= max && startDate >= min) { return true; }
            else { return false; }
        });


    $('#selectByDate').on('change', function () {
        var minDate = new Date();
        $("#minInput").datepicker("setDate", minDate);
        if (document.getElementById("selectByDate").value == "Today") {
            $("#maxInput").datepicker("setDate", minDate);
        } else if (document.getElementById("selectByDate").value == "Yesterday") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 1));
        } else if (document.getElementById("selectByDate").value == "Last 7 Days") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 7));
        } else if (document.getElementById("selectByDate").value == "Last 30 Days") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 30));
        } else if (document.getElementById("selectByDate").value == "Last 60 Days") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 60));
        } else if (document.getElementById("selectByDate").value == "Last 90 Days") {
            $("#maxInput").datepicker("setDate", minDate.setDate(minDate.getDate() - 90));
        }


    });

    $('#minInput, #maxInput').change(function () {
        table.draw();
    });

    $("#minInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

    $("#maxInput").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });



});

如果仍有问题，请尝试此代码，请参阅 this link with demo

【讨论】：

嗨 TwoCents，我在发布问题之前已经尝试过上面的代码，但它没有绘制表格。 "$('#selectByDate').on('change', function () " 确实改变了 mixInput 和 minInput 的值，但没有重绘表格。
不知道你在table.draw()中是怎么定义表格的；它必须是一个数据表对象。 2. 检查你的 search.push 功能逻辑 3. 检查你使用的 Datatable 版本是否支持 search.push 扩展。