堆栈内存溢出
  繁体   English   中英

$ .fn.dataTable.ext.search.push不在on（change）jquery里面工作

[英]$.fn.dataTable.ext.search.push not working inside of on(change) jquery

 原文  2019-06-12 21:52:52  1   1    javascript/ jquery/ filter/ datatable

问题描述

我无法生成日期过滤器（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();
            });
        }
    });
});

1 个解决方案

解决方案1
 0  2019-06-13 06:15:07

首先，您的代码具有许多可以避免的重复数据。

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



});

如果您仍有问题，请尝试使用此代码，请参阅此链接和演示

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 $.fn.dataTable.ext.search.push 不工作 $.fn.dataTable.ext.search.push 没有被调用 jquery 数据表 - $.fn.dataTable.ext.errMode 不是函数 jquery dataTable过滤/搜索不起作用 jQuery数据表搜索突出显示不起作用 jQuery $ .fn不能正常运行 jQuery数据表搜索和排序不适用于.html（）函数 如何在jQuery中更改输入搜索数据表的方向 Bootstrap 4 - 数据表搜索不适用于 jQuery 添加的行 JS - jQuery.fn.DataTable 未定义
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM