如何按日期列過濾jQuery數據表？

Question

我有一個要根據一列中的日期進行過濾的數據表。 我想根據具有一年或更早日期的lastModified列過濾數據，但是即使在某個硬編碼日期對它進行過濾也是一個不錯的開始。 字符串格式的數據，因此我嘗試使用新的Date（）函數轉換為日期。

var table = $('#database').DataTable( {
        fixedHeader: true,

        data: dataSet,
        columns: [
        { data: "processName" },
        { data: "processLob" },
        { data: "processOwner"},
        { data: "RiskReviewer"},
        { data: "lastModified"}]
        } );

        var filteredData = table
        .column( { data: "lastModified"} )
        .data()
        .filter( function ( value, index ) {
        return new Date(value) < 2015-10-10 ? true : false;
        } );

Answer 1

您要做的第一件事是為日期列添加“ columnDefs”對象，並將其類型指定為“ date”。 只要您遵循一種眾所周知的格式，DateTables就會內置日期解析功能。 ColumnType API定義

如果還不能完全解決問題，那么您將需要在剛創建的新columnDef對象上為數據列定義一個渲染函數。 在那里，您可以檢查渲染類型，並為顯示內容返回“ nice”值，並為其他所有內容返回原始數據值（最好是Date類型的值）。 渲染API定義

另外，一些一般性建議不要嘗試與圖書館打架。 實際上，它非常靈活，可以處理很多事情。 因此，請盡可能使用內置的API函數。 通常，當人們嘗試使用JQuery手動操作表時，事情會出錯。 在幕后，DataTables插件保持大量狀態，從未進入DOM。 基本上，如果API中有針對它的功能，請使用它。

編輯：即使他找到了另一個解決方案，也向原始海報問題添加了答案。

要記住的一件事是，“過濾器”僅旨在為您提供經過過濾的數據集。 它不會更改網格中的顯示。 相反，您將需要在“ column（）” API項上使用“搜索”來過濾DataTable中顯示的行。

但是，這有一個小問題。 搜索方法僅接受常規值，不接受功能。 因此，如果要實現此功能，則可以提供一個自定義搜索功能，如下所示：

// The $.fn.dataTable.ext.search array is shared amongst all DataTables and 
//  all columns and search filters are evaluated in the order in which they 
//  appear in 
//  the array until a boolean value is returned.  
$.fn.dataTable.ext.search.unshift(function(settings, data, dataIndex) {
     // Using a negative value to get the column wraps around to the end of 
     // the columns so "-1" will always be your last column.
     var dateColumn = $(this).column(-1);

     // We get the data index of the dateColumn and compare it to the index
     // for the column currently being searched.
     if(dateColumn.index() !== dataIndex) {'
        // Pretty sure this indicates to skip this search filter
        return null;
     }

     var columnSearchingBy = $(this).column(dataIndex);

     // Allows the data to be a string, milliseconds, UTC string format ..etc
     var columnCellData = new Date(data.lastModified);
     var valueToSearchBy = new Date(columnSearchingBy.search.value);

     // Ok this is one of the worst named methods in all of javascript.   
     // Doesn't actually return a meaningful time.  Instead it returns the a 
     // numeric value for the number of milliseconds since ~ 1970 I think.  
     //
     // Kind of like "ticks()" does in other languages except ticks are 
     // measured differently.  The search filter I am applying here is to 
     // only show dates in the DataTable that have a lastModified after or 
     // equal the column search.
     return (valueToSearchBy.getTime() >= columnCellData.getTime());
});


// So this should use our fancy new search function applied to our datetime
// column.  This will filter the displayed values in the DataTable and from 
// that just a small filter on the table to get all the data for the rows 
// that satisfy the search filter.
var filteredData = table
        .column({ data: "lastModified"})
        .search('2015-10-10')
        .draw();

即使您找到了進行此操作的另一種方法，也許上述內容也會在以后為您提供幫助。