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按钮时的预期结果是时间值应该在第一列中前进，但它没有。\ n。初始化后，永远不会调用指定的渲染函数。

（示例的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);

Answer 2

每个人都有动态重新加载DataTables的问题。考虑这种方法。首先销毁DataTable以重新渲染。

var dataSet = [];

if ($.fn.dataTable.isDataTable('#yourTable')) {
    $('#yourTable').DataTable({
        "destroy": true,
        "processing": true,
        "data": dataSet
    });
} else {
    $('#yourTable').DataTable({
        "processing": true,
        "data": dataSet
    });
}

Answer 3

我发现，与.draw()相反，.columns.adjust().draw();会再次触发render功能。但是，不幸的是，它并没有重新呈现表格......（？）

我找到的唯一解决方法是.destroy()表格，将$('#data').html()替换为原始内容，然后重新开始$('#data').DataTable({ columnDefs: colDefs });。

＆＃13;

$(document).ready(function () {
    var table_data = $('#data').html();

    var colRender = function (data, type, row, meta) {
        var today = new Date();
        var ms = today.getMilliseconds();
        var ss = today.getSeconds();
        var mn = today.getMinutes();
        var hh = today.getHours();
        var time = ' time:' + hh + ':' + mn + ':' + ss + ':' + ms
        console.log('data+time', data + time);
        return data + time;
    }

    var colDefs = [{
        targets: 0,
        render: colRender
    }];
    
    $('#data').DataTable({
        columnDefs: colDefs
    });

    $('#refresh').click(function () {
        // $('#data').DataTable().columns.adjust().draw();
        // $('#data').DataTable().draw();
        $('#data').DataTable().destroy();
        $('#data').html(table_data);
        $('#data').DataTable({
            columnDefs: colDefs
        });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<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">Refresh</button>

＆＃13;

为什么没有column.render在调用DataTable（）。draw（）时执行？

3 个答案: