实施例

Question

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

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

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

我如何为表格标题做同样的事情？

注意：我使用“显示和隐藏”功能，因此无法直接修改aoColumns中的sTitle。

修改

我想重命名列标题以最小化列宽。我得到了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的提示！我没有关闭这个问题，因为我的解决方案不是“干净”。

Answer 1

是的，你可以自定义页眉和页脚，因为没有人回答你的病，试着给你一个开始。注意：我不是关于数据表如何在内部工作的专家。

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

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;
  }
});

像我说的那样，我希望它可以帮助你开始......

Answer 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文档中所述相反。

在具有多个标题行（tr s）的复杂方案中，您可能需要选择如下：

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

自定义数据表中的渲染

2 个答案:

实施例