How to make multiple conditions inside filter datatable jQuery

Issue

I Work with datatable library, and i have issues. In my page i have filtering menu, which generate filtering values depends of table header values.

When page start, i filter data, show only active values, if user want to see inactive he can press:

And user will see all values, but in case if i goo to main filters:

And choose some values, and try to make all values active or inactive filtering is not working. How i can solve this issues?

My code for filtering:

function drawTable(table, className, lenth) {
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            return $(table.row(dataIndex).node()).find(className).length == lenth;
        }
    );
    table.draw();
}

$(document).ready(function () {
    var table = $('#' + tableId + '').DataTable();
    if ($(".fa").hasClass("fa-eye")) {
        drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
    }

    $(".fa-eye-slash").click(function () {
        $(".fa-visibles").removeClass('hide');
        $(".fa-invisibles").addClass('hide');
        $.fn.dataTable.ext.search.pop();
        table.draw();
    });

    $(".fa-eye").click(function () {
        $(".fa-visibles").addClass('hide');
        $(".fa-invisibles").removeClass('hide');
        drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
    });
});

JSFIDDLE

Whe u tap on filtering icon, chosee for example "Office -> Regional Director", on table 3 values, but showing only two, i want to cancel this filter and tap on eye, but this not work.

Solution

According your code JSFiddle, all your code are working fine. Multiple Conditions does not work because your logic are wrong.

Let me explain.

• Active and inactive condition is working with current table's data.

• First, table's data have all data (active and inactive). You can filter like "Office -> Regional Director", you can found 3 record. And then you can click Active and inactive condition event. It will work correctly.

• Second, you hide some inactive data from table, it have only active data in your table.And then, you filter like "Office -> Regional Director". You can only found 2 record, cannot show inactive record because current table's data doesn't have inactive data.

Solution:

• you should adjust your code when call filter function, your must reload all table data first and then your can call filter process with all data.
• when finish filter data, you must check active or inactive conditions.

Example Code, Based on your provided code. I hope you will understand.

let tableId = "example";
$('.filtering-system').hide();
$('.button-container').hide();

 addSpliting('');

function showAllVaues() {
    $('#' + tableId + '').dataTable().api().pagae.len(-1).draw();
}

function addSpliting(val, length) {
    if (val != '') {
        //start Reload- Before Filter event, need to reload all data
        var table = $('#' + tableId + '').DataTable();
        $.fn.dataTable.ext.search.pop();
        table.draw();
        //end Reload
        $('#' + tableId + '').DataTable({
            destroy: true,
            searchPanes: {
                layout: 'columns-' + length + ''
            },
            columnDefs: [{
                searchPanes: {
                    show: true
                },
                targets: '_all'
            }],

            dom: 'Pfrtip'
        });
        
        $('.dtsp-searchPanes').children().each(function (i, obj) {
            if (!val.includes(i)) $(this).hide();
            else $(this).show();
        });
        //start check - When get filter data, need to check active or not 
        if ($(".fa").hasClass("fa-eye")) {
        drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
        }
        //end check
    } else {
        $('#' + tableId + '').DataTable({
            destroy: true
        });
    }
}

function setFilters() {
    $("table thead tr th").each(function (index) {
        var boxes = `<label>
                <input type="checkbox" class="custom-checkbox" id="${index}"/>
                ${$(this).text()}
                </label>`;
        if ($(this).text() != "" && $(this).hasClass('checkbox-mark') === false) $(".checkBoxes").append(boxes);
    });
}

setFilters();

$("#createFilter").on("click", function () {
    var columFilters = [];

    $('.custom-checkbox:checked').each(function () {
        columFilters.push(parseInt($(this).attr('id')));
    });

    addSpliting(columFilters, columFilters.length);
});

$("#fil-sys").on("click", function () {
    $('.filtering-system').slideToggle('slow');
});

function drawTable(table, className, lenth) {
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            return $(table.row(dataIndex).node()).find(className).length == lenth;
        }
    );
    table.draw();
}

$(document).ready(function () {
    var table = $('#' + tableId + '').DataTable();
    if ($(".fa").hasClass("fa-eye")) {
        drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
    }

    $(".fa-eye-slash").click(function () {
        $(".fa-visibles").removeClass('hide');
        $(".fa-invisibles").addClass('hide');
        $.fn.dataTable.ext.search.pop();
        table.draw();
    });

    $(".fa-eye").click(function () {
        $(".fa-visibles").addClass('hide');
        $(".fa-invisibles").removeClass('hide');
        drawTable(table, '.fa-inactive, .fa-invisible-data', 0);
    });
});

Answered By - NayDwe