Как отфильтровать столбец даты, используя dataTable

Question

Я новичок в этой концепции dataTable, использую этот же код в своем файле, пожалуйста, проверьте, как только эта ссылка https://datatables.net/examples/data_sources/server_side.html, в этом у меня есть три файла, такие как server. php, ssp. class. php и page. php (на сервере. php есть код, связанный с базой данных файлов, и в ssp.class. php У меня есть данные, связанные с фильтром, затем страница. php У меня есть код переднего плана) , На сервере. 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 )
);

Здесь мой запрос я, что фильтровать столбец даты из двух полей ввода, называемых start_date и end_date с datepicker.

я был попробуйте этот код:

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

В этом коде я не получаю фильтр, а maxDateFilter и minDateFilter выдают предупреждение, но в функции $.fn.dataTableExt.afnFiltering.push( function(oSettings, aData, iDataIndex) { я не получаю окно предупреждения.

Answer 1

Посмотрите на JS Fiddle: https://jsfiddle.net/14rbugwn/

Фильтры даты, добавленные к таблицам данных на основе JAVASCRIPT. Использовали HTML5 элементы ввода типа date для 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();
    } );
} );

Для совместного решения С помощью Data Side Data можно включить отдельные фильтры ввода для данных, как показано в ссылке: https://datatables.net/examples/api/multi_filter.html. Фильтры входных данных введенные пользователем данные публикуются на стороне сервера, вы можете просмотреть опубликованные данные, используя print_r ($ _ POST); для более подробной информации.