table.column(col, { search: 'applied' } ) takes all (not only visible) table rows
table.column(col, { search: 'applied' } ) takes all (not only visible) table rows
mahuss
Posts: 23Questions: 6Answers: 0
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();
}
This question has accepted answers - jump to:
Answers
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
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
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
Directorin the Position column. There are four results. Next search forEdinburghin 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
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.
Take a look at the browser's console. There are a bunch of Javascript errors that need fixed.
Kevin
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.
Sorry I don't understand what you mean . When I uncheck
Thing2it is filtered from the table.Please provide the exact steps to recreate the issue and tell what you expect to happen instead.
Kevin
As you can see finally after Tool1 is unchecked with checkbox it should not be visible when you search it from the search textbox.
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
Tool1is 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
uncheckedColumnsto 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 touncheckedColumnswith 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 afterdt.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 callcolumn().search()with an empty string. I would remove the loop and usecolumn().search()on the column that is changed. This way one input change only callscolumn().search()anddraw()once instead of for each column.Kevin
@kthorngren, thank you for the hints, the example and clarification. I am back as soon as I check if it closes the issue.
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?
Well It seems...
if ( searchData[key]===""){
searchData[key]='^$';
}
does a good job....
Use a Javascript regex expression. Maybe use regex.test() in your if statement.
Kevin
Now everything works perfectly together! Tahnk you @kthorngren