1

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

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

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

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

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

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

4

2 回答 2

2

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

可以在此处找到一个工作示例。

于 2013-08-22T08:23:54.807 回答
1

让#container滚动代替

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

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

2 - 将此添加到<style>：

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

截屏

在此处输入图像描述

于 2013-08-21T17:22:56.640 回答