Custom column with AJAX sourced table using Dandelion Datatables

Question

I've been using Dandelion Datatables for a time now with the data attribute.

I've started yesterday using the url attribute and now I'm not able to do custom columns.

I have the following:

<datatables:table id="statesTable" url="/find" pipelining="true" cssClass="table table-striped" pagingType="bootstrap_simple" dom="tip">

  <datatables:column property="name" titleKey="name.label"/>

  <datatables:column titleKey="actions.label">
    <div class="btn-group">
      <spring:url value="update" var="updateUrl">
        <spring:param name="statusId" value="${id}"/>
      </spring:url>
      <a href="${updateUrl}"><fmt:message key="actions.update"/></a>
    </div>
  </datatables:column>

</datatables:table>

Returned data is:

[{"id":7,"createdBy":"pedadmin","createdDate":1449765659000,"name":"Test"},
{"id":8,"createdBy":"pedadmin","createdDate":1449765744000,"name":"Otro"},
{"id":11,"createdBy":"pedadmin","createdDate":1449766460000,"name":"asdfasdfasdf"},
{"id":12,"createdBy":"pedadmin","createdDate":1449766539000,"name":"asañdsfadsfasfdfsad"},
{"id":13,"createdBy":"pedadmin","createdDate":1449766573000,"name":"asdfasdf"}]

And the resulting HTML generated is:

<tbody>
    <tr role="row" class="odd">
        <td class="sorting_1">asañdsfadsfasfdfsad</td><td></td>
    </tr>
    <tr role="row" class="even">
        <td class="sorting_1">asdfasdf</td><td></td>
    </tr>
    <tr role="row" class="odd">
        <td class="sorting_1">asdfasdfasdf</td><td></td>
    </tr>
    <tr role="row" class="even">
        <td class="sorting_1">Cinco</td><td></td>
    </tr>
    <tr role="row" class="odd">
        <td class="sorting_1">Cuatro</td><td></td>
    </tr>
    <tr role="row" class="even">
        <td class="sorting_1">Dos</td><td></td>
    </tr>
    <tr role="row" class="odd">
        <td class="sorting_1">Feo</td><td></td>
    </tr>
    <tr role="row" class="even">
        <td class="sorting_1">Foobar</td><td></td>
    </tr>
    <tr role="row" class="odd">
        <td class="sorting_1">Otro</td><td></td>
    </tr>
    <tr role="row" class="even">
        <td class="sorting_1">Test</td><td></td>
    </tr>
</tbody>

As you can see there is nothing in the td of the custom column. Is there something I need to configure in order to make the custom column work??? (I tested the same column using data instead of url and it works perfectly)

Thank you!

score 1 · Accepted Answer · answered Dec 16 '15 at 09:49

As the datatable is in AJAX mode, everything inside <datatable:column> is not processed (as it should be processed on server and when url is used, it is processed on browser).

So you need to specify a renderFunction and implement it.

Something like this:

<datatables:column titleKey="actions.label" property="id" renderFunction="formatColumn">

And then add the function somewhere on your code (either the same page or a .js file):

function formatColumn(data) {
    var div = $('<div>', {'class': 'btn-group'});

    $('<a>', {href: 'update?statusId=' + data, text:'Update'})appendTo(div);

    return $('<div>').append(div).html();
}

Custom column with AJAX sourced table using Dandelion Datatables

1 Answers1