How to search a column of 'select' tags

hAtul89

Following my previous post where I asked how to sort a column of <select> tags (as in this example)

I want to be able to search my column for selected items that match my search query (this doesn't happen in the example mentioned btw).

Is there a way to do that?

This is the relevant part of my code:

    // This function is triggered whenever there is a click event on the checkboxes
    appListFiltersClick: function(){

        console.log(this.appListFilters);


        // Build a regex filter string with an or(|) condition
        var types = jQuery_3_3_1(this.appListFilters).filter('input:checked').map(function() {
            console.log(this.value);
            return /*'^' +*/ this.value /*+ '\$'*/;
        }).get().join(' ');

        console.log(types);

        //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
        this.$appList.columns('.seto').search(this.value).draw();

    },
    // Create the appList DataTable for dislay
    createAppListTable: function(data){

        var that = this;

        this.$appList = this.$appList.DataTable({
            data:       data,
            columns:    [
                            {
                                title: 'Application',   
                                data: 'app'
                            }, 
                            {
                                orderDataType: 'dom-select',
                                searchable: true,
                                className: 'seto', 
                                title: 'Set to',
                                data: 'list_type',
                                width: '100px',
                                render: function(data){

                                    var select = '<select>';

                                    for (var i=0; i<4; i++) {

                                        if (data.toUpperCase() === that.listTypes[i].toUpperCase()) 
                                            select += '<option value="' + that.listTypes[i].toLowerCase() + '" selected="true">' + that.listTypes[i] + '</option>';
                                        else 
                                            select += '<option value="' + that.listTypes[i].toLowerCase() + '">' + that.listTypes[i] + '</option>';
                                    }

                                    select += '</select>';

                                    return select;
                                }
                            }
            ],
            responsive: true,
            language: {
                        search: '',
                        searchPlaceholder: 'Search Application'
            },
            processing: true,
            autoWidth: false
        });


        /* Create an array with the values of all the select options in a column */
        jQuery_3_3_1.fn.dataTable.ext.order['dom-select'] = function  ( settings, col ) {

            return this.api().column( col, { order:'index' } ).nodes().map( function ( td, i ) {
                return $('select', td).val();
            } );
        }

    },

colin

Hi @hAtul89 ,

As Allan said yesterday in your other thread , ordering is supported, but the filtering isn't.

That is an area of limitation I'm aware of in DataTables, but the fixes I've thought of so far all have heavy performance issues.

Cheers,

Colin