Defining columns with data-data ?

fischer

Hi.

We have a part in our backend that is very prone to change, so I thought, I might as well sever-side render the html and have Datatables read the column definitions from data-* attributes. Especially, I added data-data attributes to each column, conforming to the structure of the requested json.

This is the resulting html.

<table class="table table-centered table-hover mb-0 dataTable no-footer" id="model-table">
     <thead>
         <tr class="header-row" role="row">
             <th tabindex="0" class="sorting align-middle" rowspan="1" colspan="1" data-data="owner">Auswahl</th>
             <th tabindex="0" data-data="model.modelName" class="sorting align-middle" rowspan="1" colspan="1">Modell</th>
             <th tabindex="0" data-data="model.url" class="sorting align-middle" rowspan="1" colspan="1">URL</th>
             <th tabindex="0" class="sorting align-middle" rowspan="1" colspan="1" data-data="model.COUNT">Anzahl</th>
             <th tabindex="0" class="sorting align-middle" rowspan="1" colspan="1" data-data="model.NUM_PRICE">Preis</th>
             <th tabindex="0" class="sorting align-middle" rowspan="1" colspan="1" data-data="model.TXT_PRICE">Preistext</th>
             <th tabindex="0" class="sorting align-middle" rowspan="1" colspan="1" data-data="model.DISCOUNT">Rabatt</th>
             <th tabindex="0" class="sorting align-middle" rowspan="1" colspan="1" data-data="model.NUM_FINANCING">Finanzierung</th>
             <th tabindex="0" class="sorting align-middle" rowspan="1" colspan="1" data-data="model.NUM_LEASING">Leasingrate</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>

This is the datatables configuration object.

   {
       ajax : {
            url : '/someRoute',
            data : function( request ){
                request.config = $('#some-form :input:not([type=hidden])');
                request.selection = $('#selection').val();
            }
         }
  }

This results in

TypeError: **aoColumnsInit is undefined** jquery.dataTables.js:1150:15
jQuery 5
addDataTable http://localhost:8080/assets/js/datatable.js:7
modelTable http://localhost:8080/assets/js/projects/adparam.js:20
<anonym> http://localhost:8080/assets/js/projects/adparam.js:15
jQuery 2

Is this approach possible in general? Am I doing anything wrong?

rf1234

https://datatables.net/manual/options#HTML-5-data-attributes

https://datatables.net/examples/advanced_init/html5-data-options

https://datatables.net/examples/advanced_init/html5-data-attributes.html

Didn't find anything on data-data attributes though. Not sure whether this is helpful for you at all. But the three links above seem to summarize Data Table's capabilities around data attributes.

fischer

I have read the manual, otherwise this approach wouldn't have occured to me.

• According to it, data-* can be used for configuration.
• It shows that data-* can be placed on <th> elements to affect this column.
• I have therefore used data-data, as data is option for columns.
• I receive the error above.

What's wrong?

rf1234

Can't tell unfortunately but @allan or @colin might be able to help you. I only found this old thread dealing with data-data attributes that might give you a hint?!
https://datatables.net/forums/discussion/35474

kthorngren

Here is a working example using nested objects:
http://live.datatables.net/maxenoyo/1/edit

Its using data instead of ajax only because there isn't a nested object example I'm aware of in the live.datatables.net environment.

aoColumnsInit is undefined

Don't know what this error is. Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

fischer

I have found the issue. Thanks for the pointers. I involuntarily passed columns: undefined to the Datatables function. This apprently is treated differently from columns: null and the option being absent. Sorry for making a fuss.

rf1234

You are welcome. And I appreciate you are reading the docs before asking. Many people don't in this forum ... Have a great day!