Reset filters not wroking on dates filters

chinovski

Hi all!

This is my first topic in this forum, I hope you can help me.

I have 3 tables in 3 different tabs (pending, published and archived) in one page. When I filter the a table then I clique on reset filters on other tabs, all tables containt the result of the filter applied on the first table. I have this issue only with dates range filter and not with other filters.

This is my code

HTML

<label for="pending-fromDate">publication Date from</label>
<input type="text" class="datepicker" id="pending-fromDate"> 

<label for="pending-toDate">publication Date from</label>
<input type="text" class="datepicker" id="pending-toDate">

<button type="button" id="resetButton-pending">Reset</button>

<table id="pending-data-table" style="width: 100%;"
    class="table table-condensed table-hover table-striped js-dashboard-table">
    <thead>
        <tr id="pending-data-table-col">
            <th data-column-id="id-pending">Id</th>
            <th data-column-id="name-pending">name</th>
            <th data-column-id="publication-pending">publication Date</th>
            <th data-column-id="closing-pending">closing Date</th>
        </tr>
    </thead>
</table>

JS

var tabName = $('#pending-data-table'); 

tabName.dataTable({
    initComplete : function() {
        var table = tabName.DataTable();
            $('#pending-rows-number').text('(' + this.api().data().count() + ')');
            searchDatesField(table, 2, 'pending-fromDate', 'pending-toDate', 'pending');
// other filters ...
    }
});

function searchDatesField(table, columnIndex, fieldNameFrom, fieldNameTo, tabName) {
    $.fn.dataTable.ext.search.push(function(settings, datax, dataIndex) {
        var max, min;
        var fromDate = $('#'+ fieldNameFrom).val();
        var toDate = $('#'+ fieldNameTo).val();

        if (fromDate.length > 0){
            min = getFilterDateValue(fromDate);
        } else {
            min = null;
        }

        if (toDate.length > 0){
            max = getFilterDateValue(toDate);;
        } else {
            max = null;
        }

        var filterDate = new Date(datax[columnIndex].substring(0,4) + '-' 
                + datax[columnIndex].substring(4,6) + '-' 
                + datax[columnIndex].substring(6,8));

        if (min == null && max == null){
            return true;
        } else if (min == null && max != null ){
            if (filterDate <= max){
                return true;
            }
        } else if(min != null && max == null ){
            if(filterDate >= min){
                return true;
            }
        } else if (min != null && max != null) { 
            if(filterDate >= min && filterDate <= max){
                return true;
            }
        }

        return false;
    });

    initDatePickerActions(fieldNameFrom, table, tabName);
    initDatePickerActions(fieldNameTo, table, tabName);
}   

function initDatePickerActions(dateField, table, tabName){
    $('#'+ dateField).Zebra_DatePicker({
        format: 'd/m/Y',
        onSelect: function(view, elements){
            table.draw();
            if(tabName != ''){
                updateTableRowsNumber(table, $('#'+ tabName +'-rows-number'));
            }
        },
        onClear: function(view, elements){
            table.draw();
            if(tabName != ''){
                updateTableRowsNumber(table, $('#'+ tabName +'-rows-number'));
            }
        }
    });
}

function resetSearchFields(tabName) {
    var fieldSelector = '#search-filters';

    if(tabName != ''){
        fieldSelector = '#'+ tabName +'-tab';
    }

    $(fieldSelector +' .datepicker').each(function() {
        $(this).data('Zebra_DatePicker').clear_date();
    });

    $(fieldSelector +' select').each(function() {
        $(this).val('All').change();
    });

    $(fieldSelector +' input:not(.datepicker)').each(function(){
        $(this).val('').keyup();
    });
}

kthorngren

This threadhas the answer.

Kevin

chinovski

Thank you @kthorngren for your help