我可以在 thead 和 tbody 之间的 datatable/html 表中添加标题吗？答案

【问题标题】：Can I add a caption to a datatable/html table between thead and tbody?我可以在 thead 和 tbody 之间的 datatable/html 表中添加标题吗？
【发布时间】：2015-11-02 17:20:34
【问题描述】：

我想在下方和上方显示文本以提供用户说明。我正在使用 jquery dataTables 来填充它，但表格在前端遵循 HTML。有什么建议？这是一个JFiddle： http://jsfiddle.net/PrateekParekh/fr2zztL0/6/

$('#source').dataTable({
    "aaData": src,
    "sPaginationType": "full_numbers",
    "bFilter": true,
    "bProcessing": true,
    "bRedraw": true,
    "bDestroy": true,
    "bInfo": false,
    "bLengthChange": false,

    "aoColumns": [
    {"mData": "Module Title"},
    {"mData": "Module ID"},
    {"mData": "Module Language"}
    ]      

    });

【问题讨论】：

你能分享一些代码吗？ jsfiddle 或 codepen 中的东西会很棒。谢谢！
添加了jsfiddle链接。有没有办法在thead和tbody之间插入文本“Press Ctrl+Click To select”，就像标题一样？只是它需要在他们之间？

标签： html dom datatables caption

【解决方案1】：

为此使用fnDrawCallback。刷新表时，所有数据都会被清除，因此您会丢失手动添加的任何内容。 fnDrawCallback 事件在每次重绘表格后触发，因此我们可以使用它来添加您的消息。

'fnDrawCallback': function(oSettings) {
    $("<tr colspan='2'><td>Press Ctrl+Click To select</td></tr>").prependTo("table > tbody");
}

请参阅 here 获取 jsfiddle 的更新版本

【讨论】：

实际上它的工作方式如下：'fnDrawCallback': function(oSettings) { $("<tr><td colspan='2'>Press Ctrl+Click To select</td></tr>").prependTo("table > tbody"); } colspan 需要在 td 中才能生效。谢谢你的想法。

【解决方案2】：

您可以使用此代码！
$('#source').append('<caption style="caption-side: top">...</caption>'); $('#source').dataTable({ ... })

这会将标题添加到您在
"caption-side: top/bottom/left/right

中选择的位置上的数据表

【讨论】：