How do I sort a table column of select->option html tags (by selected option)

hAtul89

Hello, I'm trying to sort a column on <select> tags (with <option> tag inside).

What is the proper way to do that?

This is my sample code:

        this.$appList = this.$appList.DataTable({
            data:       data,
            columns:    [
                            {
                                title: 'Application',   
                                data: 'app'
                            }, 
                            {
                                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
        });

allan

See this example.

Allan

hAtul89

@allan
I expected this to get the search input to work with the selected values of the <select> input.
(It doesn't..)

kthorngren

Maybe you can post a running example of what you are trying to do so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

Right no it doesn't. The live DOM sorting does not also consider filtering. You'd need to use a custom filter for that.

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.

Allan

midomimi

Hi @allan and All,
I modified an example found in a forum to write custom filters (select option, textarea ..) idea is to write my regexp that will be used by search function to filter. It is working, but please let me know your thoughts (if it is good or it sucks
*_indexes variables (for example select_options_indexes) are indexes of columns depending on their type, and that I provide at beginning of script

   // Apply the search
    table.columns().every( function (index) {
      // that is column
      var that = this;
      $( 'input', this.footer() ).on( 'keyup change clear search', function () {
        that=table.columns(index);
        // this is the input searched string typed in the column search field
        if ( that.search() !== this.value ) {
          column_search_string=this.value;
          column_index=index;
          if (input_indexes.includes(index)) {

            if (this.value !== '') {
                regex_expr='<input type="text".*value=".*'+this.value+'.*" maxlength=.*\>';
                regex=true;
                smart=false;
            }
            // when search text is cleared on input text column, there is no value attribute in the html input attrbute
            // so regexpr will not match
            else {
                regex_expr='';
                regex=false;
                smart=false;
            }

          }
          else if (select_options_indexes.includes(index)) {
            regex_expr='[^]*selected="">[^<]*'+this.value+'.*</option>[^]*';
            regex=true;
            smart=false;
          }
          else if (text_area_indexes.includes(index)) {
            regex_expr=this.value;
            regex=false;
            smart=true;
          }
          else if (simple_text_indexes.includes(index)) {
            regex_expr=this.value;
            regex=false;
            smart=true;
          }          
          search_col=that.search(regex_expr, regex, smart);
          search_col.draw();
          }
        } );

      } );
} );

thank you very much.