jquery数据表筛选器

Question

我有一个使用日历图像的数据表的日期筛选器，它工作的很好。 但是，当我清除它不显示所有日期的日期。

我该如何制作一个按钮来显示将清除日期过滤器的所有日期？

对此的任何帮助/建议将是伟大的，提前谢谢你。

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

}); 

Answer 1

那么，你有没有尝试过：

$.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张贴的例子吗？

编辑 - 好的问题出现在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/