JQuery DataTables - группировка строк, сумма, сборка, экспорт

Я использую JQuery DataTables в течение длительного времени. Это первый раз, когда я буду работать с группировкой строк. Я нашел хороший пример того, где я хочу начать. - Grouping

  • Как добавить дополнительную группу <td> в сгруппированную строку? Что, если я хочу отобразить сумму сгруппированных зарплат в этой группированной строке? Прямо сейчас, похоже, вы можете отображать только имя группы.

введите описание изображения здесь

  1. Могу ли я сделать эти строки разборными, как они Здесь и Здесь? Похоже, что это другой плагин, чем исходный код группировки. Этот вид был бы моим предпочтением, но работа с дочерними строками не похожа на группировку.

Дополнительная информация

Я буду возвращать данные из источника Ajax.

ОБНОВЛЕНИЕ 1

Итак, я построил таблицу с группировкой строк и нашел этот пример, как суммировать столбец. Я подключаю это значение к <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

Я решил пойти с сетями Кендо вместо этого. Все эти функции уже встроены.

Ответы

Ответ 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

Я проверил ваш код и просмотрел вашу ссылку с примером.

Я также проверил ваш UPDATE

Я обнаружил, что **Kendo Grids** является лучшим вариантом в соответствии с вашим требованием.

Поэтому я предлагаю использовать: ОБНОВЛЕНИЕ 3

Ответ 3

Проверьте в своем коде строку.. "if (last! == group) Я добавил 2 кнопки:

  • expand- > вызывает функцию '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' Я помещаю em за пределы datatables script

<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;
 },

Что я здесь делаю?... Для каждой простой строки добавьте класс bootstrap "collapse" и мой собственный класс collapse_ + aData.LINEA, где linea - это поле, которое Im группирует так, наконец, → class= "collapse collapse_MAZDA"                class= "collapse collapse_BMW"

Эти элементы могут быть скрыты по умолчанию, когда вы управляете кнопками в строках групп, они будут искать элементы, которые имеют класс "collapse_MAZDA" AN