Search from dropdown, keep result when sorting?

ztevie

Here's a question that is probably unsolveable, but thought I'd throw it out there just in case someone found a way around the problem...
So I use a select dropdown outside of the datatable. It consists of 2 option groups with static options. So no searchfield to enter your own values.
Each optiongroup search a specific column. If a user click an option in optgroup 1, it will search for that specific value in column 3. If a user click an option in optgroup 2, it searches for that value in column 4. I have to reset the search string in between clicks. If the user clicks in optgroup 1, and then optgroup 2, only optgroup 2's value should be searched in column 4, and the first search should be reset.
All this works as expected. When option is clicked, I make the search and do a draw(). After that I set the search to "" without making a draw() so every click is a totally new search.

The problem is: If I click an option and the search is performed, the correct result is displayed, but if I do a sort on any column, the table will be redrawn and since search now is "" all results will be displayed again. Is there any way to go around this problem?

<!--Initial html select before appending option groups and options. This first option is basically a reset of the search, return all users-->
<select id="select-adminusers" class="form-control" style="width: fit-content;">
       <option value="">Alla användare</option>
</select>

/*on Initcomplete I call fillSelect to append option groups and options for the select above*/
"initComplete": function( settings, json ) {
            fillSelect(json.options["users.workteam_id"], "Arbetsgrupp", "3");
            fillSelect(json.options["users.workdesc_id"], "Yrke", "4");
        }

/*fillSelect function populates the select*/
function fillSelect(obj, title, col){
        var objVal = "";
        var optString = "";
        optString = '<optgroup label="'+title+'" id="'+col+'">';
        $(obj).each(function(){
            objVal = this.label;
            optString += '<option value="'+objVal+'">'+objVal+'</option>';
        });
        optString += '</optgroup>';
        $("#select-adminusers").append(optString);
    };


/*When choosing an option in the select the search is performed. Note the last .search("") to avoid searching for 2 values at the same time*/
$("#select-adminusers").on('change', function(){
        var colToSearch = 0;
        colToSearch = $('#select-adminusers :selected').parent().attr('id');
        eTable.column([colToSearch]).search(this.value).draw();
        eTable.column([colToSearch]).search('');
    });

allan

but if I do a sort on any column, the table will be redrawn and since search now is ""

I don't get why that is happening I'm afraid. Why would a draw from the sorting of the table reset your filters? Does the click in the header cell trigger something?

Allan

ztevie

Oh, I just assumed that when sorting, the table will be redrawn and take into account the search filter automatically. And because I have to set the search filter to nothing, all results will be returned when sorting.
See the last line in this function:

/*When choosing an option in the select the search is performed. Note the last .search("") to avoid searching for 2 values at the same time*/
$("#select-adminusers").on('change', function(){
        var colToSearch = 0;
        colToSearch = $('#select-adminusers :selected').parent().attr('id');
        eTable.column([colToSearch]).search(this.value).draw();
        eTable.column([colToSearch]).search('');
    });

If I don't put that line there the effect will be: Clicking lets say value 1 in first optgroup will search that value like it should. Then if I click value 2 in the other optgroup(searching the other column) the search will return rows that has value 1 in one column AND value 2 in the other.
I want each click to just search one column at the time, thus returning all rows that has that specific value in that specific column, not combining with the search I did before in another column.
Because I use a dropdown, or, in reality 2 dropdowns since there are 2 optgroups, it seems the search will use both values unless I reset the search filter value after each click.
I understand this should be expected since a normal input type search field will be reset when you enter a new value because you erase the former value when entering a new one.
Ideal in this case would be if the sorting function took into account just the rows already shown, without looking at the search filter's value, but I fully understand that this is no bug and maybe not even desireable in 99.9% of cases. Maybe the only way is to use a select2 or selectize dropdown with tags so the user can clearly see what values they are actually filtering. Just thought this would be a very easy way for the user to search a column at the time in a simple way.
I have no extra triggers in the head cell.

allan

Oh I see! Yes, you need to remove line 6 in that code block, otherwise on the next draw there is no filter (which is what you are observing).

What you would need to do is clear the search for the two columns that correspond to the optgroups before setting the search value for either.

Allan

ztevie

Aaaaaargh! Of course, I'm a complete idiot!
I did think like that and put that '' line before the actual search, but I kept the [colToSearch], so as a result I just reset one of the column searches....
Sometimes you just can't see the most simple things right before your eyes!

This works in case someone else will do something similar in the future:

$("#select-adminusers").on('change', function(){
        var colToSearch = 0;
        eTable.column([3]).search('');
        eTable.column([4]).search('');
        colToSearch = $('#select-adminusers :selected').parent().attr('id');
        eTable.column([colToSearch]).search(this.value).draw();     
    });