How can i Filter multiple column data Using jquery DataTable ?

_kamal

please help me out

kthorngren

There are some examples here:
https://datatables.net/examples/api/multi_filter.html
https://datatables.net/examples/api/multi_filter_select.html
https://datatables.net/examples/api/regex.html

Datatables search API docs:
https://datatables.net/reference/api/search()
https://datatables.net/reference/api/column().search()
https://datatables.net/reference/api/columns().search()

Also there is a third party plug-in you can use:
https://github.com/vedmack/yadcf

If these don't help then please provide a full description of what you want to do.

Kevin

minhal

Hi @kthorngren ,

I am able to have multiple filter columns but It will only show the data for the matching columns. How can i get the result for the data for all my filter columns. Like in a or condition where if the data exists in any of the 3 filter columns I have it would be shown.

kthorngren

@minhal

I suggest using a Search Plugin to perform the or search. Here is a simple example using select lists for two columns:
http://live.datatables.net/mucevape/1/edit

Kevin

minhal

@kthorngren
http://live.datatables.net/todoweqe/1/edit
here is the link to my code. I am not able to pull this however it seems simple.

minhal

Hi @kthorngren ,

I am able to pull the code but still the filters won't work the way they are meant to be.
I think I am doing something wrong here.

kthorngren

Your test case isn't running. There are a few obvious problems:

• You are trying to fetch the data via ajax which doesn't appear to be accessible.
• In the HTML is the original table from the live.datatables.net example but your code is referencing a different table #studentTable which doesn't exist.
• You are trying to initialize the Datatable twice.

Here are some steps to help get your example running:
1. Instead of the ajax request you should get an example of your data and place it in a Javascript variable. Then use the data option to have Datatables use this data. Here is an example:
https://datatables.net/examples/data_sources/js_array.html
2. Replace the #example table in the HTML tab with your table.
3. Only initialize Datatables once. Only provide the Javascript code needed to replicate your issue. For example the buttons and responsive config doesn't need to be in the test case. The simpler the code in the test case the easier it is for us to help you.

Kevin

minhal

Hi @kthorngren ,

Sorry for the late reply. I have tried and fixed all the issues which you have mentioned while providing the sample testcase. Please refer the below link:

http://live.datatables.net/todoweqe/3/edit

A big thanks to you for pointing me towards the right direction for providing the right testcase for this problem.

minhal

@kthorngren ,

The problem now is that the filters are not working correctly. Please have a look at it and your response is highly appreciated.

Thanks!

kthorngren

I didn't note this from my example but each footer you want to use the search plugin with uses an id to get the checkbox status. I updated your example for this:
http://live.datatables.net/resiwolu/1/edit

Now its working.

Also note that I removed the tbody from the HTML. This is not needed since you are using data.

Kevin

minhal

@kthorngren ,

For some reason my code is not working. At first the filter will take alot of time to open and then the page stucks. After that the filter is not getting the values. I am using the same code.
But the difference is just that this time I am using my data from database.

kthorngren

Maybe its the number of rows in your table?

Hard to say without knowing more about what you have or being able to see it.

Kevin

minhal

@kthorngren ,

yes the data is pretty large around 71k rows. But it should work I am doing everything in the same way.

kthorngren

That plugin loops through all 71k rows each time you make a selection. I can understand why its slow.

Kevin

minhal

Yeah but when selecting the value from the filter its not showing the selected values from data as it should be displaying in the table. Can you please help me out to solve this?

Thanks

minhal

@kthorngren ,

I have got the filters to work now but they are loading really slow. Is there anything which can be done to make it faster?

Thanks

kthorngren

I can imagine it would take awhile for 71k rows. The search plugin processes each of the 71k rows each time there is a search or draw of the table. There is one part of that code that could be moved that may help.

Within the plugin function the selected value is captured each loop through the rows. The jQuery operations for these can be moved into the change event so they are executed only once for each search or draw. For example:

http://live.datatables.net/zarolake/1/edit

Note the global variables (position, office, off) defined at the top.

Other than that change I don't see anything else that would help. I'm not a JS expert so there may be a more efficient way to handle the if statements. Maybe others can help with improving that.

If this doesn't help the only other suggestion I have is to look at Server Side Processing. This would move the search functionality to your server script. It might be that performing a DB query with the OR statements is more efficient than using Javascript in the client.

Kevin

minhal

@kthorngren ,

Thanks alot for all your help. I really appreciate that.