Javascript 如何使用dataTable筛选日期列

我不熟悉这个dataTable的概念，我在我的文件中使用了相同的代码，请检查一下这个链接，在这里我有三个文件，像server.php、ssp.class.php和page.php（在server.php文件中有与数据库相关的代码，在ssp.class.php中有与过滤器相关的数据，然后在page.php中有前端代码）。 在server.php文件中，我的代码如下所示：

$filename = 'filterdate.php';
$columns = array(
    array( 'db' => 'filename', 'dt' => 0 ),
    array( 'db' => 'date', 'dt' => 1 ),
    array( 'db' => 'time',  'dt' => 2 ),
    array( 'db' => 'source',   'dt' => 3 ),
    array( 'db' => 'destination',     'dt' => 4 ),
    array( 'db' => 'duration',   'dt' => 5 ),
    array( 'db' => 'filename',     'dt' => 6 )
);

这里我的查询是用datepicker从两个名为start_date和end_date的输入字段中筛选日期列

我正在尝试以下代码：

    $(document).ready(function() {      
  var oTable = $('#example').DataTable({
    "oLanguage": {
      "sSearch": "Filter Data"
    },
    "iDisplayLength": -1,
    "sPaginationType": "full_numbers",
   });  
  $("#datepicker_from").datepicker({
      dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "assets/images/cal.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      minDateFilter = new Date(date).getTime();
      oTable.draw();
    }
  }).keyup(function() {
    minDateFilter = new Date(this.value).getTime();
    oTable.draw();
    //alert(minDateFilter);
  });

  $("#datepicker_to").datepicker({
      dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "assets/images/cal.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      maxDateFilter = new Date(date).getTime();
      oTable.draw();
    }
  }).keyup(function() {
    maxDateFilter = new Date(this.value).getTime();
    oTable.draw();
    //alert(maxDateFilter);
  });

//});
    } );

// Date range filter
minDateFilter = "";
maxDateFilter = "";  
$.fn.dataTableExt.afnFiltering.push(
 function(oSettings, aData, iDataIndex) {
    alert("inside table");
    if (typeof aData._date == 'undefined') {
      aData._date = new Date(aData[1]).getTime();

    }

    if (minDateFilter && !isNaN(minDateFilter)) {
      if (aData._date < minDateFilter) {
        return false;
      }
    }

    if (maxDateFilter && !isNaN(maxDateFilter)) {
      if (aData._date > maxDateFilter) {
        return false;
      }
    }

    return true;
  }
  );

$（文档）.ready（函数（）{
var oTable=$（“#示例”）.DataTable({
“语言”：{
“sSearch”：“筛选数据”
},
“iDisplayLength”：-1，
“sPaginationType”：“完整编号”，
});  
$（“#日期选择器_from”）。日期选择器({
日期格式：'年-月-日'，
展示：“按钮”，
buttonImage:“资产/图像/cal.gif”，
buttonImageOnly:false，
“onSelect”：功能（日期）{
minDateFilter=新日期（Date）.getTime（）；
rotable.draw（）；
}
}).keyup（函数（）{
minDateFilter=新日期（this.value）.getTime（）；
rotable.draw（）；
//警报（minDateFilter）；
});
$（“#日期选择器_to”）。日期选择器({
日期格式：'年-月-日'，
展示：“按钮”，
buttonImage:“资产/图像/cal.gif”，
buttonImageOnly:false，
“onSelect”：功能（日期）{
maxDateFilter=新日期（Date）.getTime（）；
rotable.draw（）；
}
}).keyup（函数（）{
maxDateFilter=新日期（this.value）.getTime（）；
rotable.draw（）；
//警报（maxDateFilter）；
});
//});
} );
//日期范围过滤器
minDateFilter=“”；
maxDateFilter=“”；
$.fn.dataTableExt.afnFiltering.push(
功能（oSettings、aData、iDataIndex）{
警报（“内表”）；
如果（数据类型.\u日期=='未定义'）{
aData._date=新日期（aData[1]）.getTime（）；
}
if（minDateFilter&！isNaN（minDateFilter））{
if（数据日期maxDateFilter）{
返回false；
}
}
返回true；
}
);

---

在这段代码中，我没有得到filter、maxDateFilter和minDateFilter发出警报，而是在

$.fn.dataTableExt.afnFiltering.push（函数（oSettings、aData、iDataIndex）{

函数中，我没有得到警报框。

看看JS小提琴：

针对基于JAVASCRIPT的datatables添加的日期筛选器。已将HTML5输入类型日期元素用于datepicker。在筛选数据时，已将输入日期转换为unix时间戳，然后匹配表中的数据

JS代码：

function toTimestamp(inputDateTime) {
    if( inputDateTime == null || typeof inputDateTime == 'undefined' ) {
        inputDateTime = new Date();
    }
    return Math.round(new Date(inputDateTime).getTime()/1000);
}

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column

        var from_date = toTimestamp($('#from_date').val());
        var to_date = toTimestamp($('#to_date').val());
        var start_date = toTimestamp(data[4]);

        var record_found = false;

        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            record_found = true;
        }

        if( record_found && 
            ( ( isNaN( from_date ) && isNaN( to_date ) ) || 
              ( isNaN( from_date ) && from_date <= to_date ) || 
              ( from_date <= start_date && isNaN( to_date ) ) || 
              ( from_date <= start_date && start_date <= to_date ) ) )
        {
            record_found = true;
        }
        else
        {
            record_found = false;
        }
        return record_found;
    }
);

$(document).ready(function() {
    var table = $('#example').DataTable();

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

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

函数到时间戳（inputDateTime）{
如果（inputDateTime==null | | inputDateTime的类型=='undefined'）{
inputDateTime=新日期（）；
}
返回Math.round（新日期（inputDateTime）.getTime（）/1000）；
}
$.fn.dataTable.ext.search.push(
功能（设置、数据、数据索引）{
var min=parseInt（$（'#min'）.val（），10）；
var max=parseInt（$（'#max'）.val（），10）；
var age=parseFloat（数据[3]）| | 0；//将数据用于age列
var from_date=toTimestamp（$（“#from_date”）.val（）；
var to_date=toTimestamp（$（“#to_date”）.val（）；
var开始日期=toTimestamp（数据[4]）；
var记录_found=假；
如果（（isNaN（最小值）和&isNaN（最大值））||
（伊斯南（分钟）&&age控制台日志中是否存在任何错误？您是否使用url中存在的单个列筛选：。如果是，则将单个值发送到服务器端。如果您希望发送任何额外参数，请查看“您可以使用插件轻松完成”查看这里的讨论和这里的js实时示例谢谢@SimoneRossaini一个错误是comimg like
Uncaught SyntaxError:意外标记'。
我想这是datepicker css
谢谢@PrasadWargad这样我需要的，而不是年龄我想要筛选日期列，请检查一下。