Orthogonal data from AJAX and column definition with HTML5 data attributes

fxu

Description of problem:

I'm trying to render a DataTable using orthogonal data obtained via AJAX, specifying which data to map to which column using only HTML5 data attributes. Column definition looks like this in the table header:

<th data-data="category" data-orderable="true">Category</th>
<th data-data="amount" data-orderable="true">Amount</th>

The data from AJAX looks like this:

{"data": [{"category": "incoming", "amount": {"display": "8.000", "sort": 8000}}, ...]}

The category column renders correctly but the amount only shows "[object Object]". If I set data-data="amount.display" then the content is displayed correctly, but sorting still does not work correctly. Am I using orthogonal data wrong or is it a problem with HTML5 data attributes?

colin

You would need to use columns (or columnDefs) to breakdown that object - something like this:

        columnDefs: [{
            targets: 1,
            render: {
                _: 'display',
                sort: 'sort'
            }
        }]

Colin

fxu

Hey Colin, I have it working with columnDefs already but, for reasons I don't want to bother you guys with here, I want to try a solution with HTML5 data attributes. Also I would have to specify the above columnDefs for each and every orthogonal column....The way I understand the docs is that there should be a way to do this similar to the above with HTML5 data attributes. Am I using it wrong somehow, is it a bug or am I misunderstanding that it is possible?

Another way I thought about doing this is overwriting the render() function for all targets and checking if the data is orthogonal...would this be a better way to solve it?

Thanks for your time.

kthorngren

My understanding is HTML5 data attributes for orthogonal data is only supported with DOM sourced tables. See Allan's responses in this thread and this thread.

Kevin