DataTables 1.13.1日期范围筛选重置异常及方案有效性咨询

我基于DataTables 1.13.1实现了带日期范围筛选的表格功能，添加了两个按钮分别用于执行筛选和重置筛选。需求是点击重置按钮时，清除表格的筛选状态并清空日期输入框。

最初我在重置方法中使用$.fn.dataTable.ext.search.pop();来清除筛选，但仅首次重置有效，之后甚至无法再进行筛选。

初始HTML代码 #

<table border="0" cellspacing="5" cellpadding="5">
    <tbody>
        <tr>
            <td>Desde el:</td>
            <td>
                <input type="text" id="min" name="min">
            </td>
        </tr>
        <tr>
            <td>Hasta el:</td>
            <td>
                <input type="text" id="max" name="max">
            </td>
        </tr>
        <tr>
            <td>
                <button id="filtrar_fecha">Filtrar</button>
                <button id="reset_filtrar_fecha">Resetear</button>
            </td>                
        </tr>
    </tbody>
</table>

初始JS代码 #

var minDate, maxDate;

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = minDate.val();
        var max = maxDate.val();
        var date = new Date( data[5] );
 
        if (
            ( min === null && max === null ) ||
            ( min === null && date <= max ) ||
            ( min <= date   && max === null ) ||
            ( min <= date   && date <= max )
        ) {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    
    minDate = new DateTime($('#min'), {
        format: 'MMMM Do YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'MMMM Do YYYY'
    });
 
 
    var table = $('#example').DataTable();
    
    $("#filtrar_fecha").click(function() {        
        table.draw();
    });

    $("#reset_filtrar_fecha").click(function() {        
        $.fn.dataTable.ext.search.pop();        
        $("#min").val("");
        $("#max").val("");
        table.columns().search("").draw(); 
    });
});

更新内容 #

我调整了代码，重置筛选的功能看似正常，但再次应用筛选时，第5条及以后的结果出现异常。想问下这种解决方式是否可行？

修改后的JS代码 #

var minDate, maxDate;
 
$(document).ready(function() {
    // 创建日期选择器
    minDate = new DateTime($('#min'), {
        format: 'DD / MM / YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'DD / MM / YYYY'
    });
 
    // 初始化DataTables
    var table = $('#example').DataTable();

    $("#filtrar_fecha").click(function() {

       if ( $("#min").val() !== "" || $("#max").val() !== "") {

            $.fn.dataTable.ext.search.push(
                function( settings, data, dataIndex ) {
                    var min = minDate.val();
                    var max = maxDate.val();
                    var date = new Date( data[5] );
             
                    if (
                        ( min === null && max === null ) ||
                        ( min === null && date <= max ) ||
                        ( min <= date   && max === null ) ||
                        ( min <= date   && date <= max )
                    ) {
                        return true;
                    }
                    return false;
                }
            );

            table.draw();
        }
    });

    $("#reset_filtrar_fecha").click(function() {
        $("#min, #max").val("");
        $.fn.dataTable.ext.search = [];
        table.draw(); 
    });
});

你的修改思路存在核心问题：每次点击筛选按钮都会往$.fn.dataTable.ext.search数组中新增一个筛选函数，多次点击后会有多个筛选逻辑叠加执行，这就是二次筛选结果异常的原因。

正确的实现方式应该是只注册一个全局日期筛选函数，通过输入框的状态控制筛选逻辑，而不是每次筛选都新增函数。

调整后的完整JS代码 #

var minDate, maxDate;
var table;

// 仅注册一次全局日期筛选函数
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var minVal = $('#min').val();
        var maxVal = $('#max').val();
        
        // 若两个输入框都为空，直接返回所有数据
        if (!minVal && !maxVal) {
            return true;
        }
        
        var date = new Date(data[5]);
        // 转换输入框值为Date对象，避免字符串比较误差
        var min = minVal ? new Date(minVal) : null;
        var max = maxVal ? new Date(maxVal) : null;

        if (
            (min === null && date <= max) ||
            (min <= date && max === null) ||
            (min <= date && date <= max)
        ) {
            return true;
        }
        return false;
    }
);

$(document).ready(function() {
    // 初始化日期选择器
    minDate = new DateTime($('#min'), {
        format: 'DD / MM / YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'DD / MM / YYYY'
    });

    // 初始化表格
    table = $('#example').DataTable();

    // 筛选按钮：直接重绘表格，筛选逻辑由全局函数处理
    $("#filtrar_fecha").click(function() {        
        table.draw();
    });

    // 重置按钮：清空输入框后重绘表格即可
    $("#reset_filtrar_fecha").click(function() {        
        $("#min, #max").val("");
        table.draw(); 
    });
});

关键改动说明 #

1. 单一筛选逻辑：提前注册一次日期筛选函数，避免多次点击筛选导致的逻辑叠加
2. 空值处理：筛选函数内判断输入框为空时直接返回所有数据，无需清空ext.search数组
3. 日期类型转换：将输入框的字符串日期转为Date对象，避免字符串比较的精度问题
4. 简化重置逻辑：重置仅需清空输入框并重绘表格，全局筛选函数会自动识别空状态

这样修改后，无论点击多少次筛选或重置，都只会有一个筛选逻辑生效，不会出现结果异常的问题。

内容的提问来源于stack exchange，提问作者EDG_DGK