2012-03-15 2 views
3

캘린더 이미지를 사용하는 datatables에 대한 datefilter가 있으며 잘 작동합니다. 그러나 날짜를 지우면 모든 날짜가 표시되지 않습니다.Jquery datatables filter

날짜 필터를 삭제할 모든 날짜를 표시하는 버튼을 만들려면 어떻게해야합니까?

이 문제에 대한 도움이나 조언은 도움이 될 것입니다. 미리 감사드립니다.

// 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