How can I make a checkbox or select box have all the filters name in options present in datatable?

tariq.sleekr

I am using the jQuery Datatables WordPress plugin to display a data table. The Daatables have 230+ search filters. So It takes a lot of screen space and does not look great.

Is there any option in the jQuery data table to have a checkbox selection or select box selection on the front end where a user can choose which filter he/she wants to use? Or Any other suggestions?

kthorngren

Does this example do what you want?

Kevin

tariq.sleekr

Thanks for your reply @kthorngren.
Let me clarify with an example. In the example you provided, there are three columns: name, office, and salary. What I'm looking for is a checkbox list or a dropdown menu where the options correspond to these column names (name, office, salary). Users would be able to select an option, such as "salary," and then a filter specifically for salary would appear, allowing the user to apply a text filter to that column.

kthorngren

Have you looked at the SearchBuilder extension? I think it does what you described.

Kevin

kthorngren

Here is a hardcoded checkbox search example:
https://live.datatables.net/vipifute/1/edit

You could use the code in the first example I linked to to dynamically build the checkboxes.

Kevin

tariq.sleekr

I did look at Search Builder and It is somewhere near my requirement. The example you shared does not have columns in checkboxes instead It has data in it.

kthorngren

The only other Datatables supplied search extension is SearchPanes.

Maybe I'm not clear on exactly what you want. If SearchBuilder or SearchPanes don't meet your needs then you will need to create a custom UI.

You can use column().title() or columns().titles() to get the header name(s) to dynamically list the columns as checkboxes or select options. Then display the appropriate checkboxes or select options for the user to filter from.

If you want to build your custom UI in a test case then we can collaborate on issues you may run into.

Kevin

tariq.sleekr

Thanks for your help @kthorngren
Search Builder was very near but not exactly what I wanted so I have built that using custom jQuery and bootstrap-select.
What I have done is very simple:
1) Hide all the filters on the page load
2)Show Our custom dropdown that has all the columns of the table
3)On selection of that dropdown corresponding filter will be displayed.
4)On deselection, the corresponding filter will get hidden, and its state reset.

Screenshot

Thank you.

kthorngren

Looks good, glad you got it working!

Kevin