Skip to content

Instantly share code, notes, and snippets.

/fiddle.css

Created March 20, 2018 11:44
Show Gist options
  • Save anonymous/c80e7fcb2f3a9ec14f7718cd5b50118e to your computer and use it in GitHub Desktop.
Save anonymous/c80e7fcb2f3a9ec14f7718cd5b50118e to your computer and use it in GitHub Desktop.
Download ZIP
Rowgroup subtotal and total (source: http://jsfiddle.net/X5LB9/)
Raw
fiddle.css
.dataTables_scrollBody thead{
visibility:hidden;
}
.group{
background-color:#333!important;
font-size:11px;
color:#fff!important;
opacity:0.7;
}
Raw
fiddle.html
<table class="grid" width="100%">
<thead>
<tr>
<th>Consulente</th><th>target</th><th>Visti</th><th>Chiusi</th><th>Ratio</th><th>Venduto €</th><th>Aps €</th>
</tr>
</thead>
<tbody>
<tr>
<td column="Consulente:">MRS FOUR</td><td column="target:">WALK INS</td><td column="Visti:">2</td><td column="Chiusi:">1</td><td column="Ratio:">1.00</td><td column="Venduto €:">3.903€</td><td column="Aps €:">1.952€</td>
</tr>
<tr>
<td column="Consulente:">MRS FOUR</td><td column="target:">ANNULLAMENTI</td><td column="Visti:">0</td><td column="Chiusi:">2</td><td column="Ratio:">0.00</td><td column="Venduto €:">-1.398€</td><td column="Aps €:">-699€</td>
</tr>
<tr>
<td column="Consulente:">MISTER ONE</td><td column="target:">RINNOVI</td><td column="Visti:">0</td><td column="Chiusi:">2</td><td column="Ratio:">0.00</td><td column="Venduto €:">3.388€</td><td column="Aps €:">1.694€</td>
</tr>
<tr>
<td column="Consulente:">MISTER ONE</td><td column="target:">WALK INS</td><td column="Visti:">9</td><td column="Chiusi:">2</td><td column="Ratio:">4.50</td><td column="Venduto €:">4.122€</td><td column="Aps €:">2.061€</td>
</tr>
<tr>
<td column="Consulente:">MISTER ONE</td><td column="target:">RIFERITI</td><td column="Visti:">2</td><td column="Chiusi:">2</td><td column="Ratio:">1.00</td><td column="Venduto €:">4.122€</td><td column="Aps €:">2.061€</td>
</tr>
<tr>
<td column="Consulente:">MISTER ONE</td><td column="target:">INBOUND</td><td column="Visti:">3</td><td column="Chiusi:">1</td><td column="Ratio:">3.00</td><td column="Venduto €:">1.953€</td><td column="Aps €:">1.953€</td>
</tr>
<tr>
<td column="Consulente:">MISTER ONE</td><td column="target:">PROSPECTING</td><td column="Visti:">1</td><td column="Chiusi:">1</td><td column="Ratio:">1.00</td><td column="Venduto €:">1.840€</td><td column="Aps €:">1.840€</td>
</tr>
<tr>
<td column="Consulente:">MISTER ONE</td><td column="target:">PLATFORM</td><td column="Visti:">3</td><td column="Chiusi:">3</td><td column="Ratio:">1.00</td><td column="Venduto €:">5.710€</td><td column="Aps €:">1.903€</td>
</tr>
<tr>
<td column="Consulente:">MISTER ONE</td><td column="target:">ANNULLAMENTI</td><td column="Visti:">0</td><td column="Chiusi:">2</td><td column="Ratio:">0.00</td><td column="Venduto €:">-2.318€</td><td column="Aps €:">-1.159€</td>
</tr>
<tr>
<td column="Consulente:">MISTER TWO</td><td column="target:">WALK INS</td><td column="Visti:">2</td><td column="Chiusi:">1</td><td column="Ratio:">2.00</td><td column="Venduto €:">2.439€</td><td column="Aps €:">2.439€</td>
</tr>
<tr>
<td column="Consulente:">MISTER TWO</td><td column="target:">RIFERITI</td><td column="Visti:">3</td><td column="Chiusi:">2</td><td column="Ratio:">1.50</td><td column="Venduto €:">3.359€</td><td column="Aps €:">1.680€</td>
</tr>
<tr>
<td column="Consulente:">MISTER TWO</td><td column="target:">INBOUND</td><td column="Visti:">2</td><td column="Chiusi:">0</td><td column="Ratio:"></td><td column="Venduto €:">0€</td><td column="Aps €:"></td>
</tr>
<tr>
<td column="Consulente:">MISTER TWO</td><td column="target:">PLATFORM</td><td column="Visti:">4</td><td column="Chiusi:">1</td><td column="Ratio:">4.00</td><td column="Venduto €:">-901€</td><td column="Aps €:">-901€</td>
</tr>
<tr>
<td column="Consulente:">MISTER TWO</td><td column="target:">ANNULLAMENTI</td><td column="Visti:">1</td><td column="Chiusi:">2</td><td column="Ratio:">0.50</td><td column="Venduto €:">-3.031€</td><td column="Aps €:">-1.516€</td>
</tr>
<tr>
<td column="Consulente:">BB</td><td column="target:">RINNOVI</td><td column="Visti:">0</td><td column="Chiusi:">2</td><td column="Ratio:">0.00</td><td column="Venduto €:">1.827€</td><td column="Aps €:">914€</td>
</tr>
<tr>
<td column="Consulente:">BB</td><td column="target:">WALK INS</td><td column="Visti:">4</td><td column="Chiusi:">1</td><td column="Ratio:">4.00</td><td column="Venduto €:">1.287€</td><td column="Aps €:">1.287€</td>
</tr>
<tr>
<td column="Consulente:">BB</td><td column="target:">RIFERITI</td><td column="Visti:">5</td><td column="Chiusi:">1</td><td column="Ratio:">5.00</td><td column="Venduto €:">1.371€</td><td column="Aps €:">1.371€</td>
</tr>
<tr>
<td column="Consulente:">BB</td><td column="target:">INBOUND</td><td column="Visti:">2</td><td column="Chiusi:">0</td><td column="Ratio:"></td><td column="Venduto €:">0€</td><td column="Aps €:"></td>
</tr>
<tr>
<td column="Consulente:">BB</td><td column="target:">PLATFORM</td><td column="Visti:">12</td><td column="Chiusi:">2</td><td column="Ratio:">6.00</td><td column="Venduto €:">4.248€</td><td column="Aps €:">2.124€</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Consulente</th><th>target</th><th>Visti</th><th>Chiusi</th><th>Ratio</th><th>Venduto €</th><th>Aps €</th>
</tr>
</tfoot>
</table>
Raw
fiddle.js
$(document).ready(function() {
var table = $('.grid').not('.initialized').addClass('initialized').show().DataTable({
"columnDefs": [
{ "visible": false, "targets": 0 }
],
"order": [[ 0, 'asc' ]],
"stateSave": false,
"stateDuration": 60*60*24*365,
"displayLength": 100,
"sScrollX": "100%",
"dom": 'lfTrtip',
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
var colonne = api.row(0).data().length;
var totale = new Array();
totale['Totale']= new Array();
var groupid = -1;
var subtotale = new Array();
api.column(0, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
groupid++;
$(rows).eq( i ).before(
'<tr class="group"><td>'+group+'</td></tr>'
);
last = group;
}
val = api.row(api.row($(rows).eq( i )).index()).data(); //current order index
$.each(val,function(index2,val2){
if (typeof subtotale[groupid] =='undefined'){
subtotale[groupid] = new Array();
}
if (typeof subtotale[groupid][index2] =='undefined'){
subtotale[groupid][index2] = 0;
}
if (typeof totale['Totale'][index2] =='undefined'){ totale['Totale'][index2] = 0; }
valore = Number(val2.replace('€',"").replace('.',"").replace(',',"."));
subtotale[groupid][index2] += valore;
totale['Totale'][index2] += valore;
});
} );
$('tbody').find('.group').each(function (i,v) {
var rowCount = $(this).nextUntil('.group').length;
$(this).find('td:first').append($('<span />', { 'class': 'rowCount-grid' }).append($('<b />', { 'text': ' ('+rowCount+')' })));
var subtd = '';
for (var a=2;a<colonne;a++)
{
subtd += '<td>'+subtotale[i][a]+' OUT OF '+totale['Totale'][a]+ ' ('+ Math.round(subtotale[i][a]*100/totale['Totale'][a],2) +'%) '+'</td>';
}
$(this).append(subtd);
});
}
} );
// Order by the grouping
$('.grid tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 0 && currentOrder[1] === 'asc' ) {
table.order( [ 0, 'desc' ] ).draw();
}
else {
table.order( [ 0, 'asc' ] ).draw();
}
});
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment