2

DataTables 插件似乎不允许自定义渲染。

我们可以使用 aTargets 和 mRender 在初始化时自定义单元格渲染：

"aoColumnDefs": [{
    "aTargets": [transaction_id_index],
"mRender": function (data, type, row) {
    return 'custom '+data;
    }
}]

我怎样才能对表头做同样的事情？

注意：我使用显示和隐藏功能，所以我不能直接修改 aoColumns 中的 sTitle。

编辑

我想重命名列标题以最小化列宽。我得到了这样的标题：“foo_bar”。现在我正在使用它，但这肯定不是最好的方法：

'fnInitComplete': function(oSettings, json){
    $(table).find("thead tr th").each(function(index) {
        $(this).html($(this).html().split("_").join("<br>"));
    });
},
"fnDrawCallback": function( oSettings ) {
    // TO IMPROVE
    $(table).find("thead tr th").each(function() {
        if($(this).text().indexOf("_") !== -1) {
            $(this).html($(this).text().split("_").join("<br>"));                                        
        }
    });
}

感谢@kabstergo 的提示！我没有结束这个问题，因为我的解决方案不是“干净的”。

4

2 回答 2

2

是的，您可以自定义页眉和页脚，因为没有人回答您病态尝试给您一个开始。注意：我不是数据表内部工作方式的专家。

在我们的网站上，我们有带有自定义标题的数据表。这是通过这样做

var table = $('#my-datatable');
table.dataTable({
  ...
  'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
  'fnInitComplete': function(oSettings){
    // Style length select
    table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
    tableStyled = true;
  }
});

就像我说的，我希望它能帮助你开始一些事情......

于 2013-07-11T16:53:48.467 回答
2

在 DataTables ^1.10 中，headerCallback您可以在初始化选项中提供一个挂钩。

例子

（$是 jQuery）

$('#example').DataTable({
    headerCallback: function headerCallback(thead, data, start, end, display) {
        $(thead)
            .find('th')
            .first()
            .html('Displaying ' + (end - start) + ' records');
    }
});

请注意，第一个参数实际上可能是 中的第一个tr，thead不一定是thead元素本身，这与 DataTables 文档中的说明相反。

在具有多个标题行 ( trs) 的复杂场景中，您可能需要像这样选择：

$('#example').DataTable({
    headerCallback: function headerCallback(thead, data, start, end, display) {
        $(thead)
            .closest('thead')
            .find('th')
            .first()
            .html('Displaying ' + (end - start) + ' records');
    }
});
于 2016-09-27T15:38:14.243 回答