Move filters out of columns and add column names to each select

Move filters out of columns and add column names to each select

silkspinsilkspin Posts: 141Questions: 32Answers: 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

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓
  • silkspinsilkspin Posts: 141Questions: 32Answers: 5

    That's even better than what I was trying for! It saves valuable screen space. Thank you very much @kthorngren

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited October 2021

    Glad to be of help. You may want to add some CSS to control the select input size so its remains consistent.

    Kevin

  • silkspinsilkspin Posts: 141Questions: 32Answers: 5

    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

  • DograDogra Posts: 3Questions: 0Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    @Dogra Yes, just clear the filters -tag div`, like this:
    http://live.datatables.net/sixopiti/20/edit

    Kevin

  • DograDogra Posts: 3Questions: 0Answers: 0

    Awesome, that works like magic. Thank you!

  • DograDogra Posts: 3Questions: 0Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

Sign In or Register to comment.