Move filters out of columns and add column names to each select
Move filters out of columns and add column names to each select
silkspin
Posts: 152Questions: 34Answers: 5
I wanted to use dropdown filters on a Responsive Datatable, but because complex headers aren't supported I want to try and work around this. What I've done is create a test case that moves cascading filters out of the table's header/footer to the top of the page into <div id="filters"></div>. This works fine. The selects are for Position and Office.
http://live.datatables.net/sakogeqe/1/edit
The bit I'm stuck on is getting the column name and putting it either above or in front of the dropdown. Does anyone know how this can be achieved?
This question has an accepted answers - jump to answer
Answers
Use
column().header(). Here is one option:http://live.datatables.net/nagukuvu/1/edit
Kevin
That's even better than what I was trying for! It saves valuable screen space. Thank you very much @kthorngren
Glad to be of help. You may want to add some CSS to control the select input size so its remains consistent.
Kevin
I've taken your advice @kthorngren! I'll be doing the main styling with Bootstrap, but I thought I'd add some extra functionality to the test case for the benefit of others. The top option (column title) has a list icon and the select changes to green to indicate it's selected. I've also added a "Clear" button.
http://live.datatables.net/sixopiti/2/edit
Thank you for the above code solution which was exactly what I needed, but the filter dropdowns are copied/pasted every time another event is triggered (i.e. a sort or flipping to the next series of entries). Once a filter is applied through the dropdown, only a single set of dropdowns is shown again.
What happens here and can this multiplication of dropdowns be removed?
@Dogra Yes, just clear the filters -tag div`, like this:
http://live.datatables.net/sixopiti/20/edit
Kevin
Awesome, that works like magic. Thank you!
It seems that when a value in the dropdown is selected that contains a special character like a point "." or a dash "-" the downdown does not show the value after selecting it.
For example, let's change one single value to <td>System-Architect</td> (including the "-" sign). After selecting that value in the dropdown, the yellow box remains empty. Anyone knows how to fix that?
Doing a little debugging of the code where the item is selected you can see some of the special characters are escaped using
$.fn.dataTable.util.escapeRegex(). You need to remove the\, like this:http://live.datatables.net/sixopiti/22/edit
Look at the console for the output with the backslash.
BTW, if you work on an example and make changes the link will change (or you might need to clone it). Once you make the changes you can post the new link for us to look at.
Kevin