How to add a Dropdown filter

latinunit

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?

latinunit

latinunit

kthorngren

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