在DataTables表的底部努力定位一个总计行

Question

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

在将表转换为DataTable之前，我从服务器端将其创建为HTML。总数是在服务器端处理的（因为它不像把它们全部加起来那么简单，有平均值和各种各样的数据）。这是原来的桌子。如您所见，总计行在表中的顺序与其他行相同。

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

在DataTable的draw回调期间，我曾尝试使用jQuery重新构造表，但FixedColumns将HTML弄得一团糟，我无法做到这一点（大约有4个表，都包含div，都有隐藏/剥离的页眉/正文/页脚，只用于一个表）。我不会发布代码，因为它不起作用，但它涉及到用类标记行、查找所述行、克隆行、删除原始行，然后将克隆行附加到tbody的底部。即使这样，它也会破坏格式，因为奇数/偶数行被移动到彼此相邻的位置=/

我试着写我自己的排序函数，总是把总计放在底部，但它只在按名称排序时起作用（因为那是我唯一一次访问单词“总计”，因为它只有该列的数据）。

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

Answer 1

让#容器进行滚动

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

1-从dataTable（）初始化中删除“sScrollX”：“100%”

2-将此添加到

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

截图

Answer 2

我已经通过使用一个相当hacky的jQuery修复了这个问题。首先，在页脚中绘制总行，然后将其添加为FrozenColns构造函数的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());

这里可以找到一个工作示例。