努力将总行放在DataTables表的底部

Question

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

我将表格从服务器端创建为HTML，然后再将其转换为DataTable。总数是处理服务器端（因为它不是简单地添加它们，有平均值和所有种类）。 Here's the original table.正如您所看到的，Total行在表中排序，就像任何其他行一样。

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

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

我尝试编写自己的排序函数以始终将Total置于底部，但只有在按名称排序时才有效（因为这是我唯一一次访问“total”字样，因为它只有数据该专栏）。

我觉得我真的错了，因为当然有人需要服务器端总排......我能找到的所有例子都没有使用FixedColumn。

Answer 1

我已经通过使用一个相当hacky 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.

Answer 2

让#container进行滚动

请参阅此http://live.datatables.net/utacup/edit#javascript,html

1 - 从"sScrollX" : "100%"初始化

中删除dataTable()

2 -  将其添加到<style>：

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

截图