We're Moving to a New Support Platform – Starting June 1st!

We’re excited to let you know that starting June 1st, we’ll be transitioning to a new support system that will be available directly on our product websites – Amelia, wpDataTables, and Report Builder. In fact, the new support platform is already live for Amelia and wpDataTables, and we encourage you to reach out to us there.

You'll always be able to reach us through a widget in the bottom right corner of each website, where you can ask questions, report issues, or simply get assistance.

While we still do not offer live support, a new advanced, AI-powered assistant, trained on our documentation, use cases, and real conversations with our team, is there to help with basic to intermediate questions in no time.

We're doing our best to make this transition smooth and hassle-free. After June 1st, this current support website will redirect you to the new "Contact Us" pages on our product sites.

Thanks for your continued support and trust – we’re excited to bring you an even better support experience!

Okay
  Public Ticket #2846347
Styling
Closed

Comments

  • Arran Hearn started the conversation
    August 10, 2021 at 9:35pm

    Hello TMS team,

    I have successfully and happily created a table using a dynamic JSON array, and have a couple of questions:

    1. My site is using a pretty vanilla bootstrap look, I'd like to display the table, search-box, filters and pagination buttons in a standard bootstrap way to match the site. The closest 'skin' seems to be 'Material' – Do I then have to manually override all of these elements under customize? It is a shame that things like the pagination elements are not setup as list elements as bootstrap would use. I guess this is not easily changed without major jQuery involvement?

    2. As far as I have read, you can only have dropdown lists for the filters on a manually built table? Can't fill them from my JSON? 

    Thank you in advance for any information regarding these points.

    Cheers

  • [deleted] replied
    August 13, 2021 at 12:32pm

    Hi Arran,

    thank you for reaching out to ussmile.png

    Filters are the same for all tables regardless of how they're made; you can't use filters only in simple tables.

    All you need to do is to enable the filter in column settings.

  • Arran Hearn replied
    August 13, 2021 at 1:35pm

    Hello Ivana,


    Thanks for your reply. I have managed to work out my issue with the filters. I would still appreciate some feed back for my main question regarding the styling of elements in a standard bootstrap way.


    Cheers

  • [deleted] replied
    August 15, 2021 at 7:48am

    Hi Arran,

    I'm glad to hear thatsmile.png

    Regarding bootstraps, please try the following:

    • Please check is there are no JS errors in the javascript console. Please check e.g. in Chrome JS console. Usually when we investigate such things we find out that some other plugin or theme are broken, and wpDataTables JS cannot execute.
    • Try to turn off option Include bootstrap on front-end in main settings of plugin.
    • Please try switching the theme to a different one and see if it helps.


  •   Arran Hearn replied privately
  • Arran Hearn replied
    August 17, 2021 at 8:59am

    In addition,

    I have been adding custom CSS to the field under 'NEW! Customize' Tab.

    everything I add here must contain the !important flag otherwise it displays no change as the wpdt css overrides it. Also, if custom CSS is added under Settings (which I would imagine should work globally on all tables) does not work at all.

    cheers

  • Arran Hearn replied
    August 17, 2021 at 12:57pm

    By adding !important; to styles (for instance " .wpdt-c a ") I want to override has the peculiar affect of changing all links in the wordpress dashboard too. Am I doing something wrong?

  • [deleted] replied
    August 19, 2021 at 8:32am

    Hi Arran,

    thank you for contacting back.

    There are multiple different skins available that you can use, under the Customize tab. If those skins are not suitable for you you would need to override the CSS of the table.

    Because all data tables(all except simple) have option to have different skins it is created CSS rules for each skin that contains the classes:

    .wpdt-c is main class that is located as wrapper around the table and side elements, and hidden inputs

    plus class for skin: if you selected Aqua skin then it will be using wdt-skin-aqua class

     So if you what to override those CSS you have to start CSS rules like .wpdt-c.wdt-skin-aqua .wpDataTablesWrapper

    wpDataTablesWrapper is class around table and datatables elements(filters,pagiantion,info,display length,search, export buttons)
    Also every table have own class id like if table have id 22 then class will be .wpDataTableID-22

    At the moment we do not have option for no skin so this is only way to override existing CSS. Yes you ahve to use !important or stronger CSS rule to overright CSS from bootstrap CSS and also for skin CSS
    in admin area there is also class .wpdt-c on body so that is the reason why CSS .wpdt-c a {..} afect all links in admin area.

    Just follow instructions that is explain above and you will style table like you need.

    You can suggest a feature for option no skin on this link (https://wpdatatables.com/documentation/feature-suggestion/)

    If you run into some issue with styling some elements we will help you.