数据表底部的脚注

Question

我的 table 如下所示：

基本上我只想要 table 下面的一行，指示小红色 1 和 2 在各自行中的含义。我在网上找不到任何与 datatables 中的评论或脚注有关的内容。我尝试使用 tfoot 标签并将其附加到该标签上，但它看起来很糟糕（我认为数据 tables 不同意该方法）。有人知道这个的解决方案吗？

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],
              "visible": false,
              "searchable": true
            }
          ],
          "order": [[ 2, "asc" ]],
          "rowsGroup": [2, 4, 5, 6, 7, 8, 9]
        });

    });

Answer 1

您可以在 HTML 中包含 <tfoot> 部分，然后使用 colspan 允许文本超出第一列。

例如，假设 table 有 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>

页脚中的单元格数量（也占任何 colspans）必须与一行中的单元格数量相匹配。

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

数据表底部的脚注

Footnotes at the bottom of Datatables

javascript

datatable

datatables