Sort DataTables date range

Question

Sort DataTables date range

Navigation

#1 by (1 votes)

1

I have two inputs (minimum date and maximum date) with which I want to filter the results of my tables, the problem is that DataTables has a serious problem with the ordering of dates. I have read online that for those who want to have the format dd / mm / YYYY there is a bit of a roll and recommend doing a "trick" which is faster than another option but only works in the search field that has DataTables by default, but with two inputs it does not work.

This "trick" is to put a display none with the date in YYYYMMDD format so the user does not see the content of the DataTables if you can perform the sorting.

<td><span style='display: none;'>20150221</span>21/02/2015</td>

So far with the default search filter of DataTables, the thing is that I would like two inputs and put a range of dates. And with the following code it does not work for me, it starts filtering well but when I finish writing the maximum date it does not filter correctly.

The thing is that I do not know if the first "trick" affects the second case or vice versa, someone who has had the same problem or similar would know how to light up a bit? Here I leave my code.

    $.fn.dataTableExt.afnFiltering.push(
      function( oSettings, aData, iDataIndex ) {
        var iFini = document.getElementById('min').value;
        var iFfin = document.getElementById('max').value;
        var iStartDateCol = 4;
        var iEndDateCol = 4;

        iFini = iFini.substring(6,10) + iFini.substring(3,5) + iFini.substring(0,2);
        iFfin = iFfin.substring(6,10) + iFfin.substring(3,5) + iFfin.substring(0,2);

        var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
        var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);

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

    var table_filter = $('#DataTables_Table_4').dataTable();

    $('#min').keyup( function() { table_filter.fnDraw(); } );
    $('#max').keyup( function() { table_filter.fnDraw(); } );

jquery datatables

asked by RuralGalaxy 13.09.2016 в 16:04

source

1 answer

Update django record in short period of time (ms)? Error when exporting to excell from laravel 5.5

score 1 · Accepted Answer

In the end after trying everything, I tried the moment.js library and modified the filtering function to support the dd-mm-YYYY

link

I leave here the code:

    $.fn.dataTableExt.afnFiltering.push(
            function( oSettings, aData, iDataIndex ) {
                var filterstart = $('#min').val();
                var filterend = $('#max').val();
                var iStartDateCol = 4;
                var iEndDateCol = 4;

                var tabledatestart = aData[iStartDateCol];
                var tabledateend = aData[iEndDateCol];

                var minDay = filterstart.substring(0,2);
                var minMonth = filterstart.substring(3,5);
                var minYear = filterstart.substring(6,10);

                var maxDay = filterend.substring(0,2);
                var maxMonth = filterend.substring(3,5);
                var maxYear = filterend.substring(6,10);

                filterstart = minYear + minMonth + minDay;
                filterend = maxYear + maxMonth + maxDay;

                if ( filterstart === "" && filterend === "" )
                {
                    return true;
                }
                else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
                {
                    return true;
                }
                else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
                {
                    return true;
                }
                else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
                {
                    return true;
                }
                return false;
            }
    );

It is not necessary to remove the "trick" to make it work.