如何使用dataTable過濾日期列

Question

我是這個 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) {功能我沒有收到警報框。

Answer 1

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

針對基於 JAVASCRIPT 的數據表添加的日期過濾器。 已將 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)查看發布的數據； 更多細節。