2017-01-12 26 views
0

カスタムフィルタのコードをdataTablesに書きました。 FromToの日付があり、これらの2つの値に基づいてテーブル内のデータがフィルタリングされます。期待どおりに動作しています。
コード:https://jsfiddle.net/4w1552jp/10/
javascript code:データテーブルの変更(日付範囲フィルタ)

/*$('#data').dataTable();*/ 
     $(function() { 
      $('#minDate').datepicker(); 
      $('#maxDate').datepicker(); 
     }); 
     // Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812 
     /*function parseDateValue(rawDate) { 
      var dateArray = rawDate.split("/"); 
      var parsedDate = dateArray[2] + dateArray[0] + dateArray[1]; 
      return parsedDate; 
     }*/ 
     $.fn.dataTableExt.afnFiltering.push(
      function(oSettings, aData, iDataIndex) { 
      var iFini = ~~moment($('#minDate').val(), "DD/MM/YYYY").format("X"); 
      var iFfin = ~~moment($('#maxDate').val(), "DD/MM/YYYY").format("X"); 
      var evalDate = ~~moment(aData[4], "YYYY/MM/DD").format("X"); 
      if (evalDate >= iFini && evalDate <= iFfin) { 
       return true; 
      } else { 
       return false; 
      } 
      } 
     ); 
     $(document).ready(function() { 
      var table = $('#data').DataTable({ 
       dom: 'Bfrtip', 
       buttons: [ 
        'copyHtml5', 
        'excelHtml5', 
        'csvHtml5', 
        'pdfHtml5' 
       ] 
      }); 

      // Event listener to the two range filtering inputs to redraw on input 
      $('#minDate, #maxDate').keyup(function() { 
       table.draw(); 
      }); 
     }); 

フルスクリーン結果がである :そのページの下部にhttp://jsfiddle.net/4w1552jp/10/show/
、あなたが表示されるデータの量データテーブルに関する情報が含まれているのdiv data_infoを見ることができます。 ..

<div id="data_info" class="dataTables_info" role="status" aria-live="polite">Showing 1 to 10 of 26 entries (filtered from 58 total entries)</div> 

これは現在、次のように表示されています。Showing 1 to 10 of 26 entries (filtered from 58 total entries)
日付範囲フィルタのフィルタ(クライアントからの奇妙な要求)の量にかかわらず、それをShowing 1 to 10 of 26 entriesとして表示したいが、フィルタはそのまま動作するはずです。プログラムでdata-info divの情報を編集するにはどうすればよいですか?

答えて

0

)使用するには、dataTable言語拡張子を使用します。あなたのコンストラクタ上の行。

 "language": { 
      "infoFiltered": "" 
      }, 

Source

+0

はどのようにこれは私の質問に答えるのでしょうか? –

+0

これはデフォルトで "(フィルタリングされた58個のエントリから)"部分を削除します。それを試しましたか? –

+0

偉大な、それは働いた.. downvote申し訳ありません、私はupvoted :) –

1

これはハックや回避策のようなものですが、必要に応じて機能します。

そのdivのIDにonchangeリスナーを追加し、唯一の単語をフィルタ処理までの文字列を使用します。

をドキュメントレディ機能では...

$("data_info").on("change",function(){ 
    var oldHTML = $("data_info").html(); 
    var newHTML = oldHTML.substring(0,oldHTML.indexOf("(filtered") - 1); 
    $("data_info").html(newHTML); 
}); 

をこれはで開始します文字列の先頭に、すべての文字をのインデックスまで(フィルタ

+0

うーん...それはここで働いていません... –