Column names aren't being displayed

guilhermemaranhao

Guys,

My table is declared as follow:

<div id="divTable" style="height: 600px; width: 53%; float: left">
  <table id="myTable" class="row-border hover order-column" style="width: 100%">
  </table>
</div>
```![](https://datatables.net/forums/uploads/editor/jb/myq1m8w8z1rw.png "")


The DataTable is being instantiated as follow:

```js
$('#myTable').DataTable({
                destroy: true,
                initComplete: function(settings, json) {
                    // do some stuff...
                },
                ajax: {
                    url: "/my_service"
                    dataSrc: function(data){
                        // do some stuff...
                       // data item is
                      // for example: data[0] = {
                                  field1: "aaaa",
                                  field2: "bbbb", 
                                  field3: "cccc",
                                  field4: "dddd"
                          }
                        return data;
                    }
                },
                columns: [
                    { data: 'field1' },
                    { data: 'field2' },
                    { data: 'field3' },
                    { data: 'field4' }
                ],
                order: [[ 1, 'asc' ]],
                scrollY:        400,
                deferRender: true,
                scroller: true,
                columnDefs: [
                    { targets: 1, type: 'diacritics-neutralise' }
                ],
                language: {
                    url: '/pt-BR.json'
                }
            });

But the column names aren't being displayed (please, find the image attached).

I've done according to the manual (https://datatables.net/manual/data/).

Thank you,

Guilherme

guilhermemaranhao

kthorngren

You can either add a thead to your table in HTML and define the column headers (th) there, similar to the example here (click the HTML tab):
https://datatables.net/examples/basic_init/zero_configuration.html

Or if you want to define them within the Datatables config you can use columns.title along with the columns.data config you have, for example:

                columns: [
                    { data: 'field1', title: 'Field 1' },
                    { data: 'field2', title: 'Field 2' },
                    { data: 'field3', title: 'Field 3' },
                    { data: 'field4', title: 'Field 4'}
                ],

Kevin

guilhermemaranhao

Thank you, @kthorngren !

guilhermemaranhao

@kthorngren , it worked, but I'm trying to set some style settings and it is not working.

I've tried using aoColumnDefs (https://legacy.datatables.net/ref#sClass)

aoColumnDefs: [
   { sClass: 'background-color: #000000; color: white', 'aTargets': [ 0 ] }
   ],

But nothing happened.

Then, I've tried setting on the

<thead>
<tr>
<th style="background-color: #000000; color: white">field1</th>

But the it's overwritten by the

columns: [
                    { data: 'uf'},
                    { data: 'municipio'},
                    { data: 'classificacao'},
                    { data: 'iip' }
                ],

If I remove the columns option, I got an exception (http://datatables.net/tn/4).

Do i need to set my CSS outside the dataTable definition and just use the class name, as described here (https://datatables.net/reference/option/columns.className) ?

I'd like to set my settings, like background color and color inside the dataTable definition. Is it possible?

Thank you again!!

guilhermemaranhao

Hi, @kthorngren ! I've got it. I need to create my class externally.

Now, I have to set only the <th>, because all the rows were changed....

kthorngren

{ sClass: 'background-color: #000000; color: white', 'aTargets': [ 0 ] }

This is a legacy (Datatables 1.9) setting. It will work but it is recommended to use the current versions of the options. The Legacy Conversion Guide can help you determine the current option names. In this case it is columns.className. I believe the problem is you are trying to set a CSS but the option expects a name.

Other options are to use columns.createdCell, createdRow or rowCallback to modify the DOM elements.

Kevin

guilhermemaranhao

Thank you, @kthorngren . It worked!