FixedColumn and New row creation
HTML
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="http://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<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...
CSS
.dataTables_scrollBody thead{
visibility:hidden;
}
.group{
background-color:#333!important;
font-size:11px;
color:#fff!important;
opacity:0.7;
}
.hidden {
display: none;
}
JavaScript
$(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;
});
...