努力将总行定位在 DataTables 表的底部

Posted 2023-05-09

【中文标题】努力将总行定位在 DataTables 表的底部

【英文标题】：Struggling to position a total row at the bottom of a DataTables table

【发布时间】：2013-08-23 15:09:23

【问题描述】：

过去两周我尝试在他们的论坛上发帖，但我的帖子或主题从未显示。

在将表格转换为 DataTable 之前，我从服务器端将表格创建为 html。总数是在服务器端处理的（因为它不像将它们全部加起来那么简单，有平均值和各种类型）。 Here's the original table. 如您所见，Total 行在表格中与任何其他行一样排序。

我尝试将总行放在页脚中，但这会导致水平滚动条位于数据和总行之间。 See this example。这是因为水平滚动条应用于 tbody 表。由于 FixedColumns 的工作方式，页脚是其自己的表格的一部分...我尝试通过禁用 DataTables 构造函数中的水平滚动条并将其包装在固定宽度的 div 中来手动重新创建效果...它有效但 FixedColumns 没有t 因为它需要设置滚动宽度...

我尝试在 DataTable 的绘制回调期间使用 jQuery 重构表格，但 FixedColumns 使 HTML 变得如此混乱，以至于我无法做到（大约有 4 个表格，全部包含 div，全部带有仅用于一张表的隐藏/剥离页眉/正文/页脚）。我不会发布代码，因为它不起作用，但它涉及用类标记行，找到所述行，克隆它，删除原始行，然后将克隆的行附加到 tbody 的底部。即使这可行，它也会破坏格式，因为奇数/偶数行被移动到彼此相邻=/

我尝试编写自己的排序函数以始终将总计放在底部，但它仅在按名称排序时才有效（因为那是我唯一一次可以访问“总计”一词，因为它只有数据对于该列）。

我觉得我完全错了，因为之前肯定有人需要一个服务器端总行...我能找到的所有示例都没有使用 FixedColumn。

【问题讨论】：

你试过 fnFooterCallback 了吗？

【参考方案1】：

我已经通过使用一个相当老套的 jQuery 解决了这个问题。首先，在页脚中绘制 Total 行，然后将其添加为 FrozenColumns 构造函数的fnDrawCallback。其中#datatable_wrapper 与您的表 ID 的 ID 匹配。

var totalLabel= jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftFootWrapper table tfoot").clone();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftFootWrapper table tfoot").hide();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .DTFC_LeftWrapper .DTFC_LeftBodyWrapper table tbody").append(jQuery(totalLabel).html());

var totalData = jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner table tfoot").clone();
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner table tfoot").hide();      
jQuery("#datatable_wrapper .DTFC_ScrollWrapper .dataTables_scroll .dataTables_scrollBody table tbody").append(jQuery(totalData).html());

A working example can be found here.

【参考方案2】：

让#container 来代替滚动

看到这个http://live.datatables.net/utacup/edit#javascript,html

1 - 从dataTable() 初始化中删除"sScrollX" : "100%"

2 - 将此添加到<style>：

#container 
    overflow-x: scroll;
    width: 400px;
    max-width: 400px;

截图

【讨论】：

我按照原始评论中的说明进行了尝试。检查您的实时版本上的 Javascript 控制台。 FixedColumns 没有运行，所以现在当您水平滚动时，它只是一个常规表格。将其与在原件上水平滚动进行比较。