$ .fn.dataTable.ext.search.push не работает внутри на (изменить) jquery

Question

У меня возникли проблемы при создании фильтра даты (поле выбора в HTML), который показывает выбранную опцию даты из таблицы (сегодня, вчера, последние 7 дней, последние 30 дней, последние 60 дней и последние 90 дней).

Каким-то образом код в $ .fn.dataTable.ext.search.push не запускается. Пожалуйста, помогите мне!

Фильтр изображений поиска

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



});

Попробуйте этот код, если проблема не устранена, обратитесь по этой ссылке с демонстрацией