How to use multi column filter in jquery datatables

Question

I am using Jquery datatables to export my file into excel from sql database. I have 3 column filtrers on my datatables which are working fine independently. I want them to work with or condition in a way that it gets all the data from the datatable where any one the conditions in the filters is met. below is my sample of code.

 $(document).ready(function () {
   var table = $('#studentTable').DataTable({
        "ajax": {
            "url": "/StructuredImportTgts/GetData",
            "type": "GET",
            "datatype": "json"
        },
        responsive: 'true',
        dom: 'Bfrtip',
        buttons: [
            'copy', 'excel', 'pdf'
        ],
        "columns": [
            { "data": "PART_NO" },
            { "data": "LEVEL" },
            { "data": "PART_NO" },
            { "data": "PART_NAME" },
            { "data": "L1QTY" },
            { "data": "PL1" },
            { "data": "PL2" },
            { "data": "PL3" },
            { "data": "SupplierLocID" },
            { "data": "SupplierLocID" },
            { "data": "Discrepancies" },
            { "data": "Comments" }
        ],

        initComplete: function () { // After DataTable initialized 
            this.api().columns([1, 5, 6]).every(function () {
                /* use of [1,2,3] for second, third and fourth column.  Leave blank - columns() - for all.  
                Multiples? Use columns[0,1]) for first and second, e.g. */
                var column = this;
                var select = $('<select><option value=""/></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            }); // this.api function 
        } //initComplete function  

    });
});

You might want to check out this plug-in

Yevhen Horbunkov
– Yevhen Horbunkov

2019-05-30 13:31:48 +00:00
Commented May 30, 2019 at 13:31 — Yevhen Horbunkov
– Yevhen Horbunkov, Commented May 30, 2019 at 13:31
I tried to use this but now working for me

Minhal
– Minhal

2019-05-30 15:15:55 +00:00
Commented May 30, 2019 at 15:15 — Minhal
– Minhal, Commented May 30, 2019 at 15:15

Minhal · Accepted Answer · 2019-06-06 14:42:57Z

For someone who is stuck in the similar problem, here is how I tackle it.

$(document).ready(function () {
    $('#studentTable').DataTable({
        "ajax": {
            "url": "/StructuredImportTgts/GetData1",
            "type": "GET",
            "datatype": "json"
        },
        dom: 'Bfrtip',
        buttons: [
            'copy', 'excel', 'pdf'
        ],
        "columns": [
            //{ "data": "PART_NO" },
            { "data": "LEVEL" },
            { "data": "PART_NO" },
            { "data": "PART_NAME" },
            { "data": "L1QTY" },
            { "data": "PL1" },
            { "data": "PL2" },
            { "data": "PL3" },
            { "data": "SupplierLocID" },
            //{ "data": "SupplierLocID" },
            { "data": "Discrepancies" },
            { "data": "Comments" }
        ],

        initComplete: function () {
            this.api().columns([4,5,6]).every(function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        $('#studentTable').DataTable().draw();
                    });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }

    });
});

$.fn.dataTable.ext.search.push(
    function (settings, searchData, index, rowData, counter) {
        if (settings.nTable.id !== 'studentTable') {
            return true;
        }

        var position = $("#position option:selected").text();
        var office = $("#office option:selected").text();
        var off = $("#off option:selected").text();

        // Display the row if both inputs are empty
        if (position.length === 0 && office.length === 0 && off.length === 0) {
            return true;
        }

        // Display row if position matches position selection
        hasPosition = true;

        if (position !== searchData[4]) {
            hasPosition = false; //Doesn't match - don't display
        }

        // Display the row if office matches the office selection
        hasOffice = true;

        if (office !== searchData[5]) {
            hasOffice = false; //Doesn't match - don't display
        }

        hasOff = true;

        if (off !== searchData[6]) {
            hasOff = false; //Doesn't match - don't display
        }

        // If either position or office matched then display the row        
        return true ? hasPosition || hasOffice || hasOff : false;
    });

Collectives™ on Stack Overflow

How to use multi column filter in jquery datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related