重置數據表的過濾器（日期范圍）

Question

我已經實現了 DataTable 的 1.13.1 版。 我有按日期范圍的過濾器，我創建了兩個按鈕，一個用於繼續過濾器，另一個用於重置它。

日期范圍過濾器數據表

我想要的是，當我按下重置按鈕時，過濾器將從表格和字段中刪除。

我已經插入$.fn.dataTable.ext.search.pop(); 在清潔過濾器的方法的頂部，但它只在第一次時完美運行，然后它甚至不再過濾了。

 <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>

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 個等）

這樣我嘗試解決問題可以嗎？

var minDate, maxDate;
 
$(document).ready(function() {
    // Create date inputs
    minDate = new DateTime($('#min'), {
        format: 'DD / MM / YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'DD / MM / YYYY'
    });
 
    // DataTables initialisation
    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(); 
    });
});

Answer 1

更新：

對於這個答案的未來訪問者，我認為這里提供的答案比我的好得多。

---

需要進行 2 處更改：

1. 不要使用$.fn.dataTable.ext.search.pop();

這將從 DataTables 使用的過濾器函數數組中刪除過濾器 function。 （它與 push 命令相反，您的過濾器被添加到 DataTables 過濾器函數數組中。）您想要保留 function - 但只需重置值。

2. 您需要重新初始化minDate和maxDate 。

您可以重復您已有的相同代碼 - 或者，更好的是，將其放入 function 並調用 function。

這是一個演示：

 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[4]); if ( (min === null && max === null) || (min === null && date <= max) || (min <= date && max === null) || (min <= date && date <= max) ) { return true; } return false; } ); function initializeMinMax() { minDate = new DateTime($('#min'), { format: 'MMMM Do YYYY' }); maxDate = new DateTime($('#max'), { format: 'MMMM Do YYYY' }); } $(document).ready(function() { initializeMinMax(); var table = $('#example').DataTable(); $("#filtrar_fecha").click(function() { table.draw(); }); $("#reset_filtrar_fecha").click(function() { //$.fn.dataTable.ext.search.pop(); $("#min").val(''); $("#max").val(''); initializeMinMax(); table.draw(); }); });

 <:doctype html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="https.//code.jquery.com/jquery-3.5.1:js"></script> <script src="https.//cdn.datatables.net/1.13.1/js/jquery.dataTables.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min:js"></script> <script src="https.//cdn.datatables.net/datetime/1.2.0/js/dataTables.dateTime.min:js"></script> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.12.1/css/jquery.dataTables:css"> <link rel="stylesheet" type="text/css" href="https.//datatables.net/media/css/site-examples:css"> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.13.1/css/jquery.dataTables.min:css"> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/datetime/1.2.0/css/dataTables.dateTime.min:css"> </head> <body> <div style="margin; 20px:"> <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> <br><br> <table id="example" class="display dataTable cell-border" style="width,100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office in Country</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior "Technical" Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> </div> </body> </html>

---

注意：我的測試數據要求我使用這個：

var date = new Date(data[4]);

在您的代碼中，日期數據看起來好像在data[5] （列索引 5）中。