table.column(col, { search: 'applied' } ) takes all (not only visible) table rows

mahuss

Hello,

I am stuck in a place where I need two filters (the search and the regex-based dropdown filter ) cooperate each other.
I wanted to use table.column(col, { search: 'applied' } ) in order two search only visible rows, but it seems the logic does not work. Both filters start from alll table rows. Could you please look at below code and help me to solve the problem?

$(".search_col").keyup(function(){

    dt = $("#portfolio").DataTable();        
    var col = $(this).attr("id");
    dt.column(col, { search: 'applied' } ).search($(this).val().trim()).draw();

$(".filter").change(function(){
    dt = $("#portfolio").DataTable();

    elementy = []
    for (var i = 0; i<=maxCol; i++){
        elem = $('input[name="'+i+'"]').eq(0);

        elementy.push(elem);
    }

    for (elem of elementy)
    {
        var filteredValues = [] 
        var col = $(elem).attr("name");
        $('#ul'+col).children().each(function(){
            if($(this).children().eq(0).is(':checked')){
                filteredValues.push('^'+$.fn.dataTable.util.escapeRegex($(this).text().trim())+'$');
            }

        });

        if(filteredValues.length != 0){
        var filteredValues_all =  filteredValues.join("|");
        } else {
        var filteredValues_all =  '^'+randomStr+'$';
        }

        dt.column(col, { search: 'applied' } ).search(filteredValues_all, true, false).draw();

    }

kthorngren

dt.column(col, { search: 'applied' } ).search(filteredValues_all, true, false).draw();

This is not going to work the way you want.

Datatalbes performs an AND search. But it sounds like you want an OR search. You can create an OR search by creating a search plugin. See this example from this thread.

Kevin

allan

The search: 'applied' modifier should restrict the data to just those found by both the global search and the custom search.

Can you link to a test case showing the issue so I can help to debug it please.

Allan

kthorngren

I wanted to use table.column(col, { search: 'applied' } ) in order two search only visible rows, but it seems the logic does not work.

In trying to understand Allan's comment I reread you post. This is the way Datatables works by default. Take a look at this example. Search for Director in the Position column. There are four results. Next search for Edinburgh in the Office column. Now there is only one result because the second search is applied to the result of the previous searches.

Are you using server side processing? if yes, maybe the server script is doing performing an OR search instead of an AND search.

Kevin

mahuss

Alan:
I am not sure if this test-case link is going to be helpful. It looks it need some time to make the case working properly so I will try to correct it soon. But maybe it can clear antyhing as is.

https://live.datatables.net/vulegoya/1/

I will try to implement all suggestion.

kthorngren

Take a look at the browser's console. There are a bunch of Javascript errors that need fixed.

Kevin

mahuss

Kevin:
Some corrections are made now .

https://live.datatables.net/lomocuni/1/

As you can see in e.g third column the search "name" -> input "szukaj" (search) does not meet dropdowned checkboxes.

kthorngren

As you can see in e.g third column the search "name" -> input "szukaj" (search) does not meet dropdowned checkboxes.

Sorry I don't understand what you mean . When I uncheck Thing2 it is filtered from the table.

Please provide the exact steps to recreate the issue and tell what you expect to happen instead.

Kevin

mahuss

As you can see finally after Tool1 is unchecked with checkbox it should not be visible when you search it from the search textbox.

kthorngren

Now the issue makes sense

Basically you want to remove all rows with unchecked values. One option might be to use a regex search with a not expression. I've never tried this with Datatables so not sure how it would work.

Another option is to create a search plugin that removes the rows that match the unchecked options.

Here is a quick/simple example which assumes Tool1 is unchecked:
https://live.datatables.net/lomocuni/2/edit

I didn't take time to workout how to get the unchecked values. I didn't test to see if the search plugin code will work properly with multiple columns - I think it will. Anyway its just to show one way this might be accomplished.

The idea is to use uncheckedColumns to keep track of the unchecked items in each column. This is to keep from accessing the DOM within the plugin which would slow it down. In $(".filter").change(function(){ the unchecked columns will need to be applied to uncheckedColumns with the key being the column number, ie, col.

When draw() is called the plugin will execute after the global and column searches are applied. For example after dt.column(col, { search: 'applied' } ).search(filteredValues_all, true, false).draw(); is called. You can remove the { search: 'applied' } as its not doing anything.

In the event handler it looks like all the columns are iterated over to call column().search() for each column. The searches are cumulative and won't be reset until you call column().search() with an empty string. I would remove the loop and use column().search() on the column that is changed. This way one input change only calls column().search() and draw() once instead of for each column.

Kevin

mahuss

@kthorngren, thank you for the hints, the example and clarification. I am back as soon as I check if it closes the issue.

mahuss

It seems the search plugin can definitely be what I need, but another problem has occured while implementation: How can I obtain (filter) just empty fields? if searchData[key]==="" it seems all rows come visible?(Please correct me if I am wrong). While using search() I could use regex like dt.column().seach("^$").draw(). But what in this case? Can I redirect searchData[key]==="" to searchData[key]==="^$" somehow?

mahuss

Well It seems...
if ( searchData[key]===""){
searchData[key]='^$';
}
does a good job....

kthorngren

Use a Javascript regex expression. Maybe use regex.test() in your if statement.

Kevin

mahuss

Now everything works perfectly together! Tahnk you @kthorngren