Okay
  Public Ticket #3241440
Hide filters in a pop up or something similar
Closed

Comments

  • Syed Omar started the conversation

    Hi,

    How can I hide the filters that are above the table behind a button or something. So when the user clicks the button, the filters appear as a dropdown. Otherwise they are closed/hidden and won't be seen.

  •  1,850
    Miloš replied

    Hi, Syed.

    Sorry for the delay.

    -

    We currently don't have any built-in solution to achieve something like that,

    i believe it is possible with a custom CSS + JS workaround, but did not have a chance to try something like this yet.

    We have a built-in option to hide the table before filter selection is made, with our add-on Powerful filters; with "Hide table" option;

    but in order to have filters hidden behind a button on a WP page,

    you would have to do a custom setup of this button and the HTML container that holds our filters.

    -

    We don't have a working example to show you for this use-case,

    but the least i can do is try to point you in the right direction as a start.

    For example, i think you could add custom CSS to your WordPress page, 

    and if you use the right HTML and CSS selectors with a JQuery workaround to add a function to hide the filters by default on the page,

    then on click of this button to activate to "show" that element, it might work.

    -

    You can check out this useful guide on how to make JQuery effects on click like "hide" or "show" 

    https://www.w3schools.com/jquery/jquery_hide_show.asp.

    So, first add this custom CSS to the WP page, this is the HTML element which holds the entire table along with filters:

    .wpDataTablesWrapper {
        display: none;
    }

    That will set up the element to hide on initial page load,

    then if you set up the button on the page, and set up a function to have this dataTable "wrapper" element show on click of that button, it might work.

    But as i said, we can't guarantee it - it is just my idea for a custom workaround you can try.

    I hope it helps.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables