Multiple custom range filter does not work together.

Elifnr17

Hello. I have a datatable with multiple date range custom filters. When i filter just one column it works fine but when i try it with 2 date columns just the second filter works.

 //html
<th style="background-color:#82ccdd "><input type="date" id="14_dateMin" data-index=14 class="filterDateMin form-control"><input type="date" data-index=14 id="14_dateMax" class="filterDateMax form-control"></th>

 <th style="background-color:#82ccdd "><input type="date" id="15_dateMin" data-index=15 class="filterDateMin form-control"><input type="date" data-index=15 id="15_dateMax" class="filterDateMax form-control"></th>

//script
  var event = $(".filterDateMin, .filterDateMax").change(function () {
            columnIndex = $(this).data('index');

            table.draw();
        });


$.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {


            var min = $('#' + columnIndex + '_dateMin').val();
            var max = $('#' + columnIndex + '_dateMax').val();


            if (min != '') {

                var dateText = $('#' + columnIndex + '_dateMin').val();
                console.log(dateText);
                if (dateText == undefined)
                {
                    dateText = '01.01.2000';
                }

                var day = dateText.split('-')[2];
                var month = dateText.split('-')[1];
                var year = dateText.split('-')[0];
                var x = month + "/" + day + "/" + year;
                min = new Date(x);

            }

            if (max != '') {
                var dateText = $('#' + columnIndex + '_dateMax').val();
                if (dateText == undefined) {
                    dateText = '01.01.2999';
              }
                var day = dateText.split('-')[2];
                var month = dateText.split('-')[1];
                var year = dateText.split('-')[0];
                var x = month + "/" + day + "/" + year;
                max = new Date(x);

            }

            var date;

            date = data[columnIndex];
            if (date == undefined) {
                date = '01.01.1990';
            }
            var day = date.split('.')[0];
            var month = date.split('.')[1];
            var year = date.split('.')[2];
            var x = month + "/" + day + "/" + year;
            date = new Date(x);

            if (min == "" && max == "") {
                return true;
            }

            if (min == "" && date <= max) {
                return true;
            }

            if (min <= date && max == "") {
                return true;
            }

            if (min <= date && max >= date){
                return true;
            }
            return false;
        }

    );

I would appreciate some help. Thanks in advance.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

The plugin you have is basically an AND search so both columns need to be within the range to display. Sounds like you want an OR search. For an OR search you will need to combine the boolean results of both ranges. Here is some pseudo code I provided in another thread:

var dateRange = true;
var ageRange = true;
 
var dateCol = 4;
var ageCol = 3;
 
if data[ageCol] not in range ageRange = false;
if data[dateCol] not in range dateRange = false;
 
return ageRange || dateRange;

Kevin

Elifnr17

Hi thanks for your answer. It works pretty well.

But what if i have 20 parameters instead of 2. This approach doesn't fit too well. I have to look for too much conditions. What can i do in that kind of situation?

kthorngren

I guess you can do something like this pseudo code for an OR search:

if data[ageCol] in range ageRange return true;
if data[dateCol] in range dateRange return true;

return false;

Basically check the first column to see if its in the range and if so return true;. If not check the second. Finally return false; meaning that none of the columns are in the range.

Kevin