How to add a Dropdown filter

How to add a Dropdown filter

latinunitlatinunit Posts: 73Questions: 12Answers: 0

Given the following array of objects data structure

[{"blackList":"0","cmOneID":"666666","firstName":"David Llanos","id":"13251376","jurisdiction":"SCPB - LON","relationshipManager":"Adam Cavalier","_schema":"nms:recipient"}]

My init script

document.controller.setValue('/ctx/vars/recipients', JSON.stringify(response.data));    
    $('#recipients').DataTable({
        data: response.data,
        deferRender: true,
       columnDefs: [ 
            { title: 'First Name', targets: [0]},
         ],        
        columns: [
            { data: 'firstName' }
           ],
         });

I am just showing the first Name on my table, I was wondering how can I add a filter on the table header with a dropdownlist of data values, for example a list of all available jurisdictions?, if is not possible to populate a dropdown filter from the data source, then how to add dropdown filter with hardcoded values that can filter the table?

This question has an accepted answers - jump to answer

Answers

  • latinunitlatinunit Posts: 73Questions: 12Answers: 0

  • latinunitlatinunit Posts: 73Questions: 12Answers: 0

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    The easiest way to handle this is to create a hidden column for jurisdiction using column.visible. This allows for using column().search() to search the jurisdiction data. You can modify this example to build the select list. I think the following two changes should work:

    1. Line 5 change .columns() to .columns( [1] ) where 1 is the jurisdiction column. See the column-selector docs for details.
    2. Line 9 change .appendTo($(column.footer()).empty()) to use the selector of the element where you have the select input. More specifically change column.footer() to the selector.

    Like this for example:

            initComplete: function () {
                this.api()
                    .columns( [1] )  // This is the hidden jurisdiction column index
                    .every(function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($( '#my_selector' ).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>');
                            });
                    });
            },
    

    Kevin

Sign In or Register to comment.