數據表日期範圍過濾

Question

如何添加日期範圍過濾器..

像從 - 到。

我得到了常規搜索和分頁等工作。 但我不知道如何使日期範圍過濾器。

我正在使用Datatables 1.10.11版本。

我的代碼：

var oTable; 

function callFilesTable($sPaginationType, $bPaginate, $bFilter, $iDisplayLength, $fnSortcol, $fnSortdir){ 

    $.extend($.fn.dataTableExt.oStdClasses, { 
     sSortAsc : 'header headerSortDown', 
     sSortDesc : 'header headerSortUp', 
     sSortable : 'header' 
    }); 

    oTable = $('#sort').DataTable({ 
     dom : '<"table-controls-top"fl>rt<"table-controls-bottom"ip>', 
     pagingType : $sPaginationType, 
     paging : $bPaginate, 
     searching : $bFilter, 
     pageLength : $iDisplayLength, 
     order : [ [$fnSortcol, $fnSortdir] ], 
     columnDefs : [ 
      { 
       width  : '50%', 
       targets : [ 2 ], 
       orderable : true, 
       searchable : true, 
       type  : 'natural' 
      }, 
      { 
       width  : '10%', 
       targets : [ 3 ], 
       orderable : true 
      }, 
      { 
       width  : '20%', 
       targets : [ 4 ], 
       orderable : true 
      }, 
      { 
       targets : ['_all'], 
       orderable : false, 
       searchable : false 
      } 
     ], 
     language : paginationTemplate, 
     drawCallback : function() { 

      checkSelecta(); 
      placeHolderheight(); 

      // hide pagination if we have only one page 
      var api = this.api(); 
      var pageinfo = api.page.info(); 
      var paginateRow = $(this).parent().find('.dataTables_paginate'); 

      if (pageinfo.recordsDisplay <= api.page.len()) { 
       paginateRow.css('display', 'none'); 
      } else { 
       paginateRow.css('display', 'block'); 
      } 
     } 
    }); 

    oTable.on('length.dt', function (e, settings, len) { 
     updateSession({ iDisplayLength: len }); 
    }); 
} 

而且我使用NaturalSort 0.7版本。

Answer 1

我的工作地址是https://www.datatables.net/examples/plug-ins/range_filtering.html。這裏是我的jsfiddle https://jsfiddle.net/bindrid/2bkbx2y3/6/

$(document).ready(function() { 
     $.fn.dataTable.ext.search.push(
      function (settings, data, dataIndex) { 
     var min = $('#min').datepicker("getDate"); 
     var max = $('#max').datepicker("getDate"); 
     var startDate = new Date(data[4]); 
     if (min == null && max == null) { return true; } 
     if (min == null && startDate <= max) { return true;} 
     if(max == null && startDate >= min) {return true;} 
     if (startDate <= max && startDate >= min) { return true; } 
     return false; 
    } 
    ); 


     $("#min").datepicker({ onSelect: function() { table.draw(); }, changeMonth: true, changeYear: true }); 
     $("#max").datepicker({ onSelect: function() { table.draw(); }, changeMonth: true, changeYear: true }); 
     var table = $('#example').DataTable(); 

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