$ .fn.dataTable.ext.search.push在on（change）jQuery中不起作用

Question

我无法生成一个日期过滤器（HTML中的选择框），该过滤器显示表中的选定日期选项（今天，昨天，过去7天，过去30天，过去60天和过去90天）。 / p>

以某种方式不会触发$ .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();
            });
        }
    });
});

Answer 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