How to format column headers?
How to format column headers?
Oliver Utsch
Posts: 6Questions: 3Answers: 0
I am trying to format the column headers in a table using datatables better matching my color design, but not matter where I integrate code for this is has no effect at all.
What I did is:
1. Integrate in script:
jQuery('#table_boat_list')
.dataTable( {
'thead': {
'tr': {'background-color': 'blue'}
},
'dt-responsive': true,
'scrollY': '50vh',
... etc.
2. Integrate in HTML code (BS4 enabled)
<thead class="bg-primary">
<tr role="row" class="bg-primary">
<th class="sorting bg-primary" data-toggle=... cont.
Nothing of the above has any effect. The table works properly, so no syntx error or the like in script. Anyone a hint how to assign either a BS class of any manual css style to column headers?
Thanks in advance for any idea!
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Datatalbes doesn't have an option
thead. You can see all the config options here:https://datatables.net/reference/option/
In order to set a CSS or classname to just the header you will need to use a Javascript or jQuery method before initializing Datatables. Something like this:
http://live.datatables.net/togunuri/1/edit
Also
dt-responsiveshould probably just beresponsiveto enable the Responsive extension. See the docs here:https://datatables.net/extensions/responsive
Kevin
Thanks Kevin for your quick reply.
Your second hint basically works, but as I already have a script calling datatables() a second one is not executed. So either I have my colored headers, lsong all my other settings or I have the other settings, lsong my colored headers.
Is there no way to integrate both in just one script?
I honestly don't understand why I can't access the th-elements within that one initialization script (or if so how that's being done).
Oliver
There is no Datatables initialization option to modify attributes or properties of just the thead elements.
My example is initializing Datatables only once. As my example shows the jQuery method used is before the initializaitoin. Sorry, I don't uunderstand this question/comment. Maybe you need something like this:
Kevin
Thanks Kevin, exactly this is what I have done now, so I just had to run that separate JQuery statement before the datTable function.
Now it works as intended. Thanks much for your support!
Oliver