使用蒲公英数据表的具有 AJAX 源表的自定义列答案

【问题标题】：Custom column with AJAX sourced table using Dandelion Datatables使用蒲公英数据表的具有 AJAX 源表的自定义列
【发布时间】：2016-03-17 09:13:17
【问题描述】：

我已经有一段时间使用蒲公英数据表的数据属性了。

我昨天开始使用 url 属性，现在我无法自定义列。

我有以下：

<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>

返回的数据是：

[{"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"}]

生成的 HTML 是：

<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>

如您所见，自定义列的 td 中没有任何内容。我需要配置什么才能使自定义列正常工作吗？？？（我使用数据而不是 url 测试了同一列，并且效果很好）

谢谢！

【问题讨论】：

标签： jsp datatables dandelion

【解决方案1】：

由于数据表是AJAX模式，<datatable:column>里面的所有东西都不会被处理（因为它应该在服务器上处理，当使用url时，它是在浏览器上处理的）。

所以你需要指定一个renderFunction 并实现它。

类似这样的：

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

然后在代码的某处添加函数（同一页面或.js 文件）：

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

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

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

【讨论】：