2016-11-21 16 views
0

私は、1つの列の日付に基づいてフィルタリングしようとしているデータテーブルを持っています。 1年以上前の日付を持つlastModifiedカラムに基づいてデータをフィルタリングしたいのですが、ハードコーディングされた日付のフィルタを取得してもよいでしょう。私は日付に変換する新しいDate()関数を使用しようとしているので、文字列形式のデータです。jqueryデータテーブルを日付列でフィルタリングするにはどうすればよいですか?

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

答えて

0

最初にやりたいことは、あなたの日付列に「columnDefs」オブジェクトを追加し、その型を「日付」として指定することです。 DateTablesには、よく知られている形式に従っている限り、日付解析が組み込まれています。 ColumnType API Def

これで完全に取得できない場合は、作成したばかりの新しいcolumnDefオブジェクトのデータ列にレンダリング関数を定義したいと思うでしょう。そこでは、レンダリングのタイプをチェックして、表示用の「素敵な」値とそれ以外のものについての生データ値(理想的にはタイプDateの値)を返すことができます。 Render API Defintion

また、いくつかの一般的なアドバイスは、図書館と戦おうとしません。実際には非常に柔軟で、多くのことができます。可能な限り、組み込みのAPI関数を使用してください。通常、JQueryを使用して手動でテーブルを操作しようとすると、何かがうんざりになります。 DataTablesプラグインのカバーの下には、DOMに決して届かないほどの状態が維持されています。基本的に、APIに関数がある場合はそれを使用します。

EDIT:元のポスターの質問に答えを追加するには、別の解決策を見つけたにもかかわらず。

「フィルタ」は、フィルタリングされたデータセットを返すことのみを目的としています。グリッド内の表示は変更されません。代わりに、 "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(); 

あなたは上記の後にあなたを助けるかもしれない、このいずれかに行くための別の方法を発見したにもかかわらず。

+0

ありがとうAliester!私はこの機能について知らなかったし、それはより簡単になりました!この日付に基づいてデータをフィルタリングする方法を知っていますか? – Bilal

+0

nvmフィルターに日付範囲選択ツールを使用することができました。ありがとう! – Bilal

+0

@Bilal私は、人々が一般的にディスプレイをフィルタリングしたいので、代わりに "検索"を使ってこれを達成する方法の例を使って答えを更新しました。また、ディスプレイがフィルタリングされた後は、DataTableインスタンスからフィルタリングされたデータセットを取得するのも簡単です。 – Adrian

関連する問題