JQuery DataTables - 行分组、求和、可折叠、导出

Posted 2023-05-07

【中文标题】JQuery DataTables - 行分组、求和、可折叠、导出

【英文标题】：JQuery DataTables - Row Grouping, Sum, Collapsible, Export

【发布时间】：2016-03-11 10:05:24

【问题描述】：

我已经使用 JQuery DataTables 很长时间了。这是我第一次使用行分组。我找到了一个很好的例子来说明我想从哪里开始。 - Grouping

如何将额外的<td> 添加到分组行？如果我想在该分组行上显示分组工资的总和怎么办？目前，您似乎只能显示群组名称。

我可以让这些行像Here 和Here 一样可折叠吗？看起来这是一个与原始分组代码不同的插件。 This look 是我的偏好，但使用子行似乎与分组不同。

其他信息

我将从 Ajax 源返回数据。

更新 1

所以，我建立了一个行分组表，并找到了this example 如何汇总一列。我将该值插入该组行中的<td>。我现在需要的只是如何将该总和分成多个组，而不是整个列的总和。我需要这方面的帮助。

"drawCallback": function (settings) 
    var api = this.api(), data;
    var rows = api.rows( page: 'current' ).nodes();
    var last = null;

    //Calculates the total of the column
    var total = api
        .column(5)  //the salary column
        .data()
        .reduce(function (a, b) 
            return a + b;
        , 0);

    //Groups the Office column
    api.column(2,  page: 'current' ).data().each(function (group, i) 
        if (last !== group) 
            $(rows).eq(i).before(
                '<tr class="group"><td>' + group 
                 + '</td><td></td><td></td><td></td><td>' 
                 + total + '</td></tr>'
            );

            last = group;
        
    );                  

更新 2

在我看来，DataTables 无法提供我需要的所有功能。 行分组没有内置小计或可折叠性。即使我能够创建一些自定义的东西来做到这一点，看起来这些组行在导出期间没有被拾取，这是我需要的另一个要求。我可能不得不走另一条路。除非有人能满足所有这些需求，否则不要打扰。

更新 3

我决定改用 Kendo Grids。所有这些功能都已内置。

【问题讨论】：

我希望这不是真实数据。

直接来自第一个链接中的示例数据。

这在c#中的后端是偶然的吗？需要api调用吗？

是的，它是一个 MVC 站点。它必须是一个 API 调用来填充数据。

您是否尝试过创建使用Array.prototype 方法对事物进行分组的手册<td>？

【参考方案1】：

"drawCallback": function ( settings ) 
	var api = this.api(),data;
	var rows = api.rows( page:'current' ).nodes();
	var last=null;
	
	// Remove the formatting to get integer data for summation
	var intVal = function ( i ) 
		return typeof i === 'string' ?
			i.replace(/[\$,]/g, '')*1 :
			typeof i === 'number' ?
				i : 0;
	;

	total=new Array();
	api.column(2, page:'current' ).data().each( function ( group, i ) 
	    group_assoc=group.replace(' ',"_");
        if(typeof total[group_assoc] != 'undefined')
            total[group_assoc]=total[group_assoc]+intVal(api.column(5).data()[i]);
        else
            total[group_assoc]=intVal(api.column(5).data()[i]);
        
		if ( last !== group ) 
			$(rows).eq( i ).before(
				'<tr class="group"><td colspan="4">'+group+'</td><td class="'+group_assoc+'"></td></tr>'
			);
			
			last = group;
		
	 );
    for(var key in total) 
        $("."+key).html("$"+total[key]);
    

【讨论】：

感谢您的示例。在codepen上实现了codepen.io/jasonblewis/pen/PWgwPL

【参考方案2】：

我已经检查了您的代码并通过示例查看了您给定的链接。

我也检查了你的UPDATE

我发现**Kendo Grids** 是根据您的要求的最佳选择。

所以我建议使用：UPDATE 3

【参考方案3】：

在您的代码中签出这行.. " if (last !== group) 我添加了 2 个按钮：

expands->调用函数'abrir' close->调用函数'cerrar'

都接收组元素示例：'MAZDA'、'TOYOTA'、'BMW'

if (last !== group)

groupid++;
alert(group);
$(rows).eq(i).before(
'<tr class="group father_' + group + ' text-right"><td class="text-left"><text class="order">'
+ group +
'</text>'+
' <i class="fa fa-plus-square-o" aria-hidden="true" btn btn-default btn-xs" onclick="abrir(\''+group+'\')">'+
' <i class="fa fa-minus-square-o aria-hidden="true"  btn btn-default btn-xs" onclick="cerrar(\''+group+'\')">'+
'</td></tr>');
last = group;

这是我将它们放在数据表脚本之外的函数 'abrir' 和 'cerrar'

<script>
    function abrir(group) 
        $(".collapse_"+group).collapse("show");
    

    function cerrar(group) 
        $(".collapse_"+group).collapse("hide");
    
</script>

然后在drawcallback之后我使用（这是线索）：

"fnRowCallback": function (nRow, aData, iDisplayIndex)
 
   nRow.className = "collapse collapse_" + aData.LINEA;
   return nRow;
 ,

我在这里做什么？...为每个简单的行添加引导类“collapse”和我自己的类collapse_+aData.LINEA，其中linea 是我最后分组的字段-> class="collapse collapse_MAZDA" class="折叠折叠_宝马"

默认情况下，这些元素可能是隐藏的，当您操作组行上的按钮时，它将查找具有“collapse_MAZDA”AN 类的元素