How to format column headers?

Oliver Utsch

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!

kthorngren

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-responsive should probably just be responsive to enable the Responsive extension. See the docs here:
https://datatables.net/extensions/responsive

Kevin

Oliver Utsch

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

kthorngren

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).

There is no Datatables initialization option to modify attributes or properties of just the thead elements.

Your second hint basically works, but as I already have a script calling datatables() a second one is not executed.

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:

jQuery('#table_boat_list thead th').css('background-color', 'blue');

jQuery('#table_boat_list')
.dataTable( {
    'responsive': true,
    'scrollY': '50vh',
... etc.

Kevin

Oliver Utsch

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