如何按日期列筛选 jquery 数据 table？

Question

我有一个数据 table，我正试图根据一列中的日期进行过滤。我想根据日期为一年或更早的 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 Def

如果这不能让您完全到达那里，那么您将需要在刚刚创建的新 columnDef 对象上为数据列定义一个呈现函数。在那里，您可以检查渲染类型和 return 显示的 "nice" 值以及其他所有内容的原始数据值（理想情况下是 Date 类型的值）。 Render API Defintion

还有一些一般性的建议，不要试图与图书馆作对。它实际上非常灵活，可以处理很多事情。因此，尽可能使用内置的 API 函数。当人们尝试使用 JQuery 手动操作 table 时，通常事情会出错。在幕后，DataTables 插件维护着大量从未进入 DOM 的状态。基本上，如果 API 中有一个函数，就使用它。

编辑： 添加原始发帖者问题的答案，即使他找到了另一个解决方案。

要记住的一件事是 "filter" 只是为了给您返回经过过滤的数据集。它不会改变网格中的显示。相反，您需要在 "column()" API 项上使用 "search" 来过滤 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();

即使您找到了另一种方法来进行此操作，但以上内容可能会在以后帮助您。

如何按日期列筛选 jquery 数据 table？

How to filter jquery data table by date column?

javascript

datatable

datatables

datatables-1.10