jquery - 为什么调用 DataTable().draw() 时 columns.render 不执行？

Question

我很困惑为什么 columns.render 没有包含在 DataTable().draw() 的执行管道中。

一个例子:

HTML

<table id="data">
    <thead>
        <tr>
            <th>TimeColumn</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>234</td>
        </tr>
        <tr>
            <td>345</td>
            <td>456</td>
        </tr>
        <tr>
            <td>567</td>
            <td>678</td>
        </tr>
    </tbody>
</table>

<button id="refresh">Refreh</button>

jQuery

$(document).ready(function () {
    $('#data').DataTable({
        columnDefs: [{
            targets: 0,
            render: function(data, type, row, meta) {
                return data + ' time:' + Date.now();
            }
        }]
    });

    $('#refresh').on('click', function() {
        $('#data').DataTable().draw();
    });
});

点击 Refresh 按钮时的预期结果是时间值应该在第一列中前进，但事实并非如此。
分配的渲染函数在初始化后永远不会被调用。

(示例的 jsFiddle。)

是否有任何解决方法，或者我是否必须深入研究 DataTables 的代码？

Answer 1

我没有销毁数据表并重新填充它，而是修改了 jquery.datatables.js 版本 1.10.2。

主要问题是 jquery.datatables.js 中的第 1935 行检查该行是否已创建:

if ( aoData.nTr === null )
{
  _fnCreateTr(oSettings, iDataIndex);
}

解决此问题的一个方法是设置 aoData.nTr = null。但这可能会破坏其他功能或导致不必要的副作用，因此这不是一个可接受的解决方案。

我选择向 .draw() 函数(第 7137 行)添加一个参数，并添加一个名为 bForceReDraw 的设置(draw() 已经接受了一个参数，所以我们添加第二个参数):

_api_register('draw()', function (resetPaging, forceReDraw) {
  return this.iterator( 'table', function ( settings ) {
    settings.bForceReDraw = forceReDraw === true;
      _fnReDraw(settings, resetPaging === false);
  } );
} );

然后我将第 1935 行的 null 检查更改为:

if ( aoData.nTr === null || oSettings.bForceReDraw === true )
{
  _fnCreateTr(oSettings, iDataIndex);
}

在函数 _fnCreateTr() 中还有一个 null 检查 nTr (第 1586 行)所以我也需要修改它:

if ( row.nTr === null || oSettings.bForceReDraw === true )
{
  nTr = nTrIn || document.createElement('tr');
  ...

现在我们只需使用新参数调用 draw()，一切都按预期进行。

$('#data').DataTable().columns.adjust().draw(false, true);