数据表底部的脚注

编程问答 2022-05-25

问题描述

我的表如下所示：

enter image description here

基本上我只想要表格下方的一行，指示小红色 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>

如下所示：

enter image description here

如果您的文本可能会扩展页脚的整个宽度，那么您可以使用：

    <tfoot>
        <tr>
            <td colspan="6">A very much longer note here explaining something extremely important.</td>
        </tr>
    </tfoot>

页脚中的单元格数量（也包括所有 colspan）必须与一行中的单元格数量相匹配。

背景说明 - 在数据表中使用 colspan 有一些限制。有关详细信息，请参阅 complex headers。

datatabledatatabledatatablesjavascript