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.
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.
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.
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.
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?
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.
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
Hi Arran,
thank you for reaching out to us
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.
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
Hi Arran,
I'm glad to hear that
Regarding bootstraps, please try the following:
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
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?
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.