如何解决数据表底部的脚注
基本上我只想要表格下方的一行,指示小红色 1 和 2 在各自行中的含义。我在网上找不到任何与数据表中的评论或脚注有关的东西。我尝试使用 tfoot
标签并将其附加到该标签上,但它看起来很糟糕(我认为这是数据表不同意该方法)。有人知道解决方案吗?
HTML:
<table id="'.$id.'" class="table table-bordered dt-responsive" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr>'.$tableheadings.'</tr>
</thead>
<tbody>
'.$tableContent.'>
</tbody>
<tfoot>
<td>A note here explaining something important.</td>
</tfoot>
</table>
Javascript:
$(function() {
let table;
table = $('#table_preview').DataTable({
"pageLength": 25,"processing": true,"ajax": {
"url": '/assets/ajax/table_ajax_handler.PHP',"type": "POST","data": { action: "getpesticidesForTable" }
},"columns": [
{ "data": "crop" },{ "data": "diseases" },{ "data": "chemical" },{ "data": "product" },{ "data": "rate" },{ "data": "max_no" },{ "data": "hi" },{ "data": "mrl" },{ "data": "pcs_no" },{ "data": "supplier" }
],"searchCols": [
{ "search": '<?=$crop?>' || null },{ "search": '<?=$disease?>' || null }
],"columnDefs" : [
{
"targets": [0],"visible": false,"searchable": true
},{
"targets": [1],"searchable": true
}
],"order": [[ 2,"asc" ]],"rowsGroup": [2,4,5,6,7,8,9]
});
});
解决方法
您可以在 HTML 中包含 <tfoot>
部分,然后使用 colspan
允许文本超出第一列。
例如,假设一个有 6 列的表:
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="2">A note here explaining something important.</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
如下所示:
如果您的文本可能会扩展页脚的整个宽度,那么您可以使用:
<tfoot>
<tr>
<td colspan="6">A very much longer note here explaining something extremely important.</td>
</tr>
</tfoot>
页脚中的单元格数量(也包括所有 colspan
)必须与一行中的单元格数量相匹配。
背景说明 - 在数据表中使用 colspan
有一些限制。有关详细信息,请参阅 complex headers。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。