[SOLVED] Thymeleaf Dandelion Datatable with added columns at page render

Thymeleaf Dandelion Datatable with added columns at page render

I am using 1.0.1 version of Dandelion-Thymeleaf. Below is the definition of my Dandelion Datatable. In the table there are 3 fixed columns, followed by some columns which are added at page render.

<table class="reportTable" dt:table="true" dt:pageable="false" dt:filterable="false" dt:processing="false" dt:serverside="false">
    <thead>
        <tr>
            <th>Day</th>
            <th>No of calls</th>
            <th>Duration</th>
            <th:block th:each="sb : ${timePeriodColumns}">
                <th th:text="${sb}">x</th>
            </th:block>
        </tr>
    </thead>
    <tbody>
        <tr th:each="sb : ${monthCallsByTimePeriod}">
            <td th:text="${sb.day}">x</td>
            <td th:text="${sb.numberOfCallsPerDay}">x</td>
            <td th:text="${sb.callDurationPerDayInMinutes}">x</td>

            <th:block th:each="tp : ${sb.dataForTimePeriod}">
                <td th:text="${tp.numberOfCalls}">x</td>
                <td th:text="${tp.callDurationInMinutes}">x</td>
            </th:block>
        </tr>
    </tbody>
</table>

Table renders fine as HTML, but when Dandelion tries to apply Datatable I get javascript error TypeError: col is undefined in jquery.dataTables.js, where I can see it iterates through columns of table and while debugging I can see that there are only 3 fixed columns in oSettings.aoColumns. So as it is processing data from TBODY when it encounters the first dynamically added column the error happens as Datatable does not "know" the non-fixed column.

If I omit the TBODY part (so only THEAD part of table renders) the error does not happen, but I can see that fixed columns have Datatable's sorting controls but non-fixed columns do not have these controls, as if they are excluded. But looking at the HTML source I cannot see the difference between these columns:

<thead>
    <tr>
        <th>Day</th>
        <th>No of calls</th>
        <th>Duration</th>
        <th>Added col1</th>
        <th>Added col2</th>
    </tr>
</thead>

What am I doing wrong? How can I add some columns to Dandelion Datatable at render time?

Solution

As a workaround I have added first three columns to timePeriodColumns List and left it to Thymeleaf to render all columns in <th th:each ...>:

<thead>
    <tr>
        <th th:each="sb : ${timePeriodColumns}" th:text="${sb}">x</th>
    </tr>
</thead>

I suspect there is a problem with using <th:block ...>, but I could not prove it. Anyway this solved my problem.