2012-03-15 7 views
3

私は、カレンダーイメージを使用しているデータ型用の日付フィルタを持っています。 しかし、私は日付をクリアすると、すべての日付が表示されるわけではありません。Jqueryデータ型フィルタ

日付フィルタをクリアするすべての日付を表示するボタンを作成するにはどうすればよいですか?

これに関する助力や助言は素晴らしいことですが、事前におねがいします。

// The plugin function for adding a new filtering routine 
$.fn.dataTableExt.afnFiltering.push(
     function(oSettings, aData, iDataIndex){ 
      var dateStart = parseDateValue($("#dateStart").val()); 
      // aData represents the table structure as an array of columns, so the script access the date value 
      // in the first column of the table via aData[0] 
      var evalDate= parseDateValue(aData[3]); 

      if (evalDate == dateStart) { 
       return true; 
      } 
      else { 
       return false; 
      } 

     }); 

// 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[1] + dateArray[0] + dateArray[3]; 
    return parsedDate; 
} 



$(function() { 
    // Implements the dataTables plugin on the HTML table 
    var $oTable= $("#example").dataTable({ 
     "iDisplayLength": 20, 
     "oLanguage": { 
      "sLengthMenu": 'Show <select><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select>' 
     }, 
     "bJQueryUI": true, 
     "aoColumns": [ 
       null, 
       null, 
       null, 
       { "sType": "date" } 
     ]     
     }); 


    // The dataTables plugin creates the filtering and pagination controls for the table dynamically, so these 
    // lines will clone the date range controls currently hidden in the baseDateControl div and append them to 
    // the feedbackTable_filter block created by dataTables 
    $dateControls= $("#baseDateControl").children("div").clone(); 
    $("#feedbackTable_filter").prepend($dateControls); 

    // Implements the jQuery UI Datepicker widget on the date controls 
    $('.datepicker').datepicker(
     {dateFormat: 'DD, d MM, yy', showOn: 'button', buttonImage: '../images/calendar.jpg', buttonImageOnly: true} 
    );  

    // Create event listeners that will filter the table whenever the user types in either date range box or 
    // changes the value of either box using the Datepicker pop-up calendar 
    $("#dateStart").keyup (function() { $oTable.fnDraw(); }); 
    $("#dateStart").change(function() { $oTable.fnDraw(); }); 

}); 

答えて

4

さて、あなたは試してみましたがあります

$.fn.dataTableExt.afnFiltering.push(
     function(oSettings, aData, iDataIndex){ 
      var dateStart = parseDateValue($("#dateStart").val()); 
      //if filter is empty return everything 
      if(dateStart === ''){ 
       return true; 
      } 
      // aData represents the table structure as an array of columns, so the script access the date value 
      // in the first column of the table via aData[0] 
      var evalDate= parseDateValue(aData[3]); 

      if (evalDate == dateStart) { 
       return true; 
      } 
      else { 
       return false; 
      } 

     }); 

あなたはjsfiddleに例を投稿することができ、これは動作しない場合は?

EDIT - ok問題は、/で作成した日付を期待していたparseDateValue()となりました。あなたが完全に一致したいので、あなたがここにparseDateValue()

// The plugin function for adding a new filtering routine 
$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex){ 
     var dateStart = $("#dateStart").val(); 
     //if filter is empty return everything 
     if(dateStart === ''){ 
      return true; 
     } 
     // aData represents the table structure as an array of columns, so the script access the date value 
     // in the first column of the table via aData[0] 
     var evalDate= aData[3]; 

     if (evalDate == dateStart) { 
      return true; 
     } 
     else { 
      return false; 
     } 

    }); 

フィドル応答のためのhttp://jsfiddle.net/eMZtV/1/

+0

こんにちは感謝を省略することができ、私はその前にしようとしなかったが、うまくいきませんでした。ここにjsfiddle:http://jsfiddle.net/eMZtV/ – Codded

+2

@Codded私は答えを更新しました –

+0

魅力のような素晴らしい作品、ありがとうございます。検索ボックスに入力した日付をクリアするにはどうすればよいですか?また、私は日付のボックスをクリアするすべてを表示すると言う画像を持つことができます – Codded