为什么在调用 DataTable().draw() 时不执行 columns.render? [英] Why doesn't columns.render execute when DataTable().draw() is called?

问题描述

我很困惑为什么 columns.render 没有包含在 DataTable().draw().

I'm puzzled to why columns.render is not included in the execution pipeline of 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按钮时的预期结果是时间值应该在第一列中前进，但事实并非如此.
初始化后永远不会调用分配的渲染函数.

The expected result when clicking the Refresh button is that the time value should advance in the first column, but it doesn't.
The assigned render function is never called after initialization.

(jsFiddle 示例.)

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

Is there any workaround or do I have to dig into the code of DataTables?

推荐答案

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

Instead of destroying the datatable and repopulating it I ended up modifying jquery.datatables.js version 1.10.2.

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

The main issue is that the line 1935 in jquery.datatables.js checks if the row is already created:

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

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

One option to remedy this is to set aoData.nTr = null. But this might break other functionality or cause unwanted side effects so this is not an acceptable solution.

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

I opted to instead add an argument to the .draw() function (line 7137) and adding a setting called bForceReDraw (draw() already takes an argument so we add a second argument):

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

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

Then I changed the null check on line 1935 to:

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

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

In the function _fnCreateTr() there is also a null check on nTr (line 1586) so I needed to modify that as well:

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

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

Now we simply call draw() with the new argument and everything works as expected.

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

这篇关于为什么在调用 DataTable().draw() 时不执行 columns.render?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！