JQuery datatable—行分组、求和、可折叠、导出

I've been using JQuery DataTables for a long time. This is the first time I'll be working with row grouping. I found a good example of where I want to start. - Grouping

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

1. How would I add an extra <td> to the grouped row? What if I wanted to display the sum of the grouped salaries on that grouped row? Right now, it looks like you can only display the name of the group.
2. 我如何为分组的行添加一个额外的 ?如果我想要在分组的行上显示分组工资的总和呢?现在，看起来您只能显示组的名称。

2. Can I make these rows collapsible like they are Here and Here? It looks like this is a different plugin than the original grouping code. This look would be my preference, but working with child rows doesn't seem to be the same as grouping.
3. 我能让这些行像这里和这里一样可折叠吗?看起来这是一个不同于原始分组代码的插件。我更喜欢这种外观，但是使用子行似乎与分组不一样。

Additional Info

额外的信息

I will be returning data from an Ajax source.

我将从Ajax源返回数据。

UPDATE 1

更新1

So, I built a table with row grouping and found this example of how to sum up a column. I'm plugging that value into a <td> in that group row. All I need now is how to break that sum amount up into the groups instead of the sum of the entire column. I need help with this.

因此，我构建了一个具有行分组的表，并找到了如何求和列的示例。我把这个值代入组行的。我现在所需要的是如何将这个求和的值分割成组而不是整个列的和。我需要帮助。

"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;
        }
    });                  
}

UPDATE 2

更新2

It doesn't look to me like DataTables can provide all the functionality I need. Row grouping doesn't have built in subtotals or collapsiblity. Even if I'm able to create something custom to do that, it looks like these group rows aren't picked up during exports, which is another requirement I need. I'll probably have to go another route. Unless someone can fulfill all of these needs, don't bother.

我不认为DataTables能够提供我所需要的所有功能。行分组不包含小计或可折叠性。即使我能够创建一些自定义的东西来实现这一点，看起来这些组行在导出过程中没有被获取，这是我需要的另一个需求。我可能得走另一条路。除非有人能满足所有这些需求，否则不要麻烦。

UPDATE 3

更新3

I've decided to go with Kendo Grids instead. All of this functionality is built in already.

我决定用Kendo网格来代替。所有这些功能都是内置的。

3 个解决方案

#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]);
    }
}

#2

I have check your code and review your given link with example.

我已经检查了您的代码并检查了您的链接。

I have also check your UPDATE

我也检查了你的更新

I found that the **Kendo Grids** is the best option as per your requirement.

我发现**Kendo网格**是您要求的最佳选择。

So i suggest to use : UPDATE 3

所以我建议使用:更新3。

#3

Check out in your code the line.. " if (last !== group) I added 2 buttons:

检查你的代码行。“if (last !== group)我添加了2个按钮:

• expands->calls function 'abrir'
• 扩展“abrir”- >调用函数
• close->calls function 'cerrar'
• 关闭- >调用函数“cerrar”

both recive the group element example: '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;
}

Here are the functions 'abrir' and 'cerrar' I put em outside the datatables script

这里是函数“abrir”和“cerrar”，我将它们放在datatables脚本之外

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

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

Then after drawcallback I use (this is the clue):

然后我使用drawcallback(这是线索):

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

What Im doing here?... For every simple row add the bootstrap class "collapse" and my own class collapse_+aData.LINEA where linea is de field that Im grouping by so finally -> class="collapse collapse_MAZDA" class="collapse collapse_BMW"

我在这里做什么?…对于每个简单的行添加引导类“折叠”和我自己的类折叠+aData。LINEA是de字段，我将其分组到最后->类="崩溃崩溃" class="崩溃崩溃- bmw "

This elements may be hidden by default, when you action the buttons on the group rows it will look for the elements that have the class "collapse_MAZDA" AN

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