DataTables配置顶部列筛选后合计显示在表头的解决方法

tfoot {display: table-header-group !important;} 会把整个表脚元素强制渲染到表头区域，后续写入tfoot的合计值自然会跟着跑到顶部，本质是把列筛选、列合计两个功能都塞到同一个tfoot容器，又强制修改tfoot渲染位置导致的冲突。

核心思路是拆分两个功能的承载容器：筛选输入框放到thead的独立行，tfoot保持默认表尾位置专门放合计，不需要再强制修改tfoot的display属性。

第一步：修改HTML结构 #

把原来放在tfoot里的筛选行挪到thead中，给thead加第二行专门放筛选输入框，tfoot保留空结构专门用来放合计，改完的PHP输出对应代码如下：

echo '<div class="card-body"><table id="html5-extension" class="table table-hover table-striped" style="width:100%">';
echo '<thead>
    <tr role="row">
        <th>'.$palabra['numeroor'].'</th>
        <th>'.$palabra['serieano'].'</th>
        <th>'.$palabra['taller'].'</th>
        <th>'.$palabra['fecha'].'</th>
        <th>'.$palabra['matricula'].'</th>
        <th>'.$palabra['vehiculo'].'</th>
        <th>'.$palabra['cristalroto'].'</th>
        <th>'.$palabra['compania'].'</th>
        <th></th>
        <th></th>
    </tr>
    <!-- 新增独立行放筛选框 -->
    <tr class="filter-row">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</thead>';
// tfoot保持默认位置，专门承载合计内容
echo '<tfoot>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tfoot>
<tbody>';
// 原有tbody输出逻辑保持不变
echo '<tr role="row">
    <td scope="row">'.$lisc['or_interna'].'</td>
    <td scope="row">'.$lisc['serie_or'].'/'.$lisc['ano_or'].'</td>
    <td>'.$datostaller->nombre.'</td>
    <td>'.cfecha($lisc['fecha_entrada']).'</td>
    <td>'.$lisc['matricula'].'</td>
    <td>'.$marca.$espacio.$modelo.'</td>
    <td>'.$arraydano['nombre'].'</td>
    <td>'.$cia->nombre_comercial.'</td>
';

第二步：修改CSS样式 #

删除之前强制修改tfoot位置的规则，只保留筛选输入框的适配样式：

#html5-extension .filter-row input {
    width: 100% !important;
    padding: 4px 6px;
    box-sizing: border-box;
}
/* 完全移除 #html5-extension tfoot {display: table-header-group !important;} 这段规则 */

第三步：修改JS逻辑 #

把筛选框初始化、事件绑定的目标从tfoot改成thead里的筛选行，合计逻辑保持原有计算规则即可，修正后的代码如下：

<script>
$(document).ready(function () {
    // 筛选框初始化到thead的筛选行，不再操作tfoot
    $('#html5-extension thead .filter-row th').each(function () {
        $(this).html('<input type="text" placeholder="Filtrar.." />');
    });

    var table = $('#html5-extension').DataTable({
        "dom": 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p><"clearfix">',
        "responsive": false,
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
        },
        "initComplete": function () {
            var api = this.api();
            api.columns().every(function () {
                var that = this;
                var colIdx = that.index();
                // 绑定筛选事件到对应列的筛选输入框
                $('.filter-row th', api.table().header()).eq(colIdx).find('input').on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that.search(this.value).draw();
                    }
                });
            })
        },
        footerCallback: function (row, data, start, end, display) {
            var api = this.api();

            var intVal = function (i) {
                return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
            };

            // 全量数据合计
            total = api
                .column(0)
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // 当前页数据合计
            pageTotal = api
                .column(0, { page: 'current' })
                .data()
                .reduce(function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0);

            // 合计值写入tfoot，不需要额外嵌套th标签
            $(api.column(0).footer()).html('€' + pageTotal + ' ( €' + total + ' en total)');
        },
        "ordering": false,
        buttons: [
            {
                extend: 'copyHtml5',
                footer: true,
                text: '<i class="glyphicon glyphicon-floppy-disk"></i><span> Copiar</span>',
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
               }
            },
            {
                extend: 'excelHtml5',
                footer: true,
                autoFilter: true,
                sheetName: 'Ordenes de Trabajo',
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
               },
                text: '<i class="glyphicon glyphicon-download-alt"></i><span> Generar Excel</span>',
                filename: 'Listado de Ordenes de Trabajo',
            },
            {
                extend: 'pdfHtml5',
                footer: true,
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
               },
                text: '<i class="glyphicon glyphicon-save-file"></i><span> Generar PDF</span>',
                filename: 'Listado de Ordenes de Trabajo',
            },
            {
                extend: 'print',
                footer: true,
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
               },
                text: '<i class="glyphicon glyphicon-print"></i><span> Imprimir</span>',
            }
        ],
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]]
    });
});
</script>

• 现有导出配置已经开启footer: true，导出文件会自动带上tfoot里的合计值，不需要额外调整
• 如果不需要导出筛选行，可以在exportOptions中配置过滤表头行，避免把空输入框导出到文件
• 不要给tfoot添加任何修改display位置的CSS规则，保持默认的table-footer-group属性即可让合计固定在表格底部

内容的提问来源于stack exchange，提问作者Francisco S