javascript - 如何使用 dataTable 过滤日期列

问题描述

我是这个 dataTable 概念的新手，我在我的文件中使用相同的代码请检查这个链接https://datatables.net/examples/data_sources/server_side.html，在这个我有三个文件，如 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;
  }
  );

在此代码中，我没有收到 filter 和 maxDateFilter 和 minDateFilter 发出警报，但在$.fn.dataTableExt.afnFiltering.push( function(oSettings, aData, iDataIndex) {功能中我没有收到警报框。

标签： javascriptphpjquerydatatables

解决方案

看看 JS Fiddle：https ://jsfiddle.net/14rbugwn/

针对基于 JAVASCRIPT 的数据表添加的日期过滤器。为 datepicker 使用了 HTML5 输入类型的日期元素。在过滤数据时，已将输入日期转换为 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();
    } );
} );

为了将解决方案与服务器端数据表结合使用，您可以针对数据表启用单独的输入过滤器，如 url 中所示的方式：https ://datatables.net/examples/api/multi_filter.html 。输入过滤用户输入的数据被发布到服务器端，您可以使用 print_r($_POST); 查看发布的数据更多细节。

javascript - 如何使用 dataTable 过滤日期列

问题描述

解决方案

推荐阅读