CODEWITHSUNDEEP
jqueryhtmldatedatatables
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Date range filter in data tables isn't working as expected

I wrote a data table with a date range filter. In Minimum Date: and Maximum Date:, I'm using fixed values 01/01/2010 and 01/01/2012 respectively. When page loads, dates falling under given date range should load automatically. But it isn't happening even though there are some dates which are clearly out of the given range.
Maybe this JSFiddle link can explain it better.
My jQuery code is: 

/*$('#data').dataTable();*/
$(function() {
  $('#minDate').datepicker();
  $('#maxDate').datepicker();
});
// Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812
function parseDateValue(rawDate) {
  var dateArray = rawDate.split("/");
  var parsedDate = dateArray[2] + dateArray[0] + dateArray[1];
  return parsedDate;
}
$.fn.dataTableExt.afnFiltering.push(
  function(oSettings, aData, iDataIndex) {
    var iFini = parseDateValue(document.getElementById('minDate').value);
    var iFfin = parseDateValue(document.getElementById('maxDate').value);
    var evalDate = parseDateValue(aData[4]);

    if (evalDate >= iFini && evalDate <= iFfin) {
      return true;
    } else {
      return false;
    }

  }
);
$(document).ready(function() {
  var table = $('#data').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copyHtml5',
      'excelHtml5',
      'csvHtml5',
      'pdfHtml5'
    ]
  });

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

How can I make data tables filter the data based on fixed values when page loads?

Upvotes: 1

Views: 2930

Answers (2)

annoyingmouse
annoyingmouse

Reputation: 5689

You're mixing apples with oranges here. Your dates are in different formats with your inputs being DD/MM/YYYY and your table rows being YYYY/MM/DD, no wonder things were going wrong. I'd use another library, momentjs, and use this code:

$.fn.dataTableExt.afnFiltering.push(
  function(oSettings, aData, iDataIndex) {
    var iFini = ~~moment($('#minDate').val(), "DD/MM/YYYY").format("X");
    var iFfin = ~~moment($('#maxDate').val(), "DD/MM/YYYY").format("X");
    var evalDate = ~~moment(aData[4], "YYYY/MM/DD").format("X");
    if (evalDate >= iFini && evalDate <= iFfin) {
      return true;
    } else {
      return false;
    }
  }
);

Hope that helps.

Upvotes: 1

B. Assem
B. Assem

Reputation: 1078

The problem in your case is that your using the function parseDateValue to convert the dates in your filters and also the dates in your table before comparing them, but, the date format in your table rows is different from the date format in your filters, so you will get:

min date = 01/01/2010 => 20100101

max date = 01/01/2012 => 20120101

and for example in your first row you have

date = 2011/04/25 => 25201104

So when you compare, it won't be good.

But if you change the date format in your rows (for example 25/04/2011), it will works fine.

Upvotes: 0

Related Questions