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

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

tariq.sleekrtariq.sleekr Posts: 7Questions: 1Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    Does this example do what you want?

    Kevin

  • tariq.sleekrtariq.sleekr Posts: 7Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited April 25

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

    Kevin

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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.sleekrtariq.sleekr Posts: 7Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited April 25 Answer ✓

    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.sleekrtariq.sleekr Posts: 7Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    Looks good, glad you got it working!

    Kevin

Sign In or Register to comment.