come sommare alcune righe in dataTable utilizzando footercallback

Question

Sto usando la tabella dati. Voglio sommare alcune colonne e voglio mostrarle in fondo al rapporto. Cerco molte cose. Poi ho trovato la nuova funzione di callback footer nella tabella dati. L'ho usato. Ma ancora la mia uscita non è ancora pronto ..

Il mio codice come segue,

function Databind(Pdestroy) {debugger; 
    var destroy = false; 
    if (Pdestroy == "1") 
     destroy = true; 

    var oTable = $('.datatable').dataTable({ 
     "bJQueryUI": true, 
     'bServerSide': true, 
     "bDestroy": destroy, 
     "iDisplayLength": 10, 
     "sPaginationType": "full_numbers", 
     'sAjaxSource': '<%= Url.Action("listcount", "Home") %>', 
     "bFilter": true, 
     "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0, 1, 2, 7, 8, 9, 10, 11]}], 

     "fnRowCallback": function (nRow, aData, iDisplayIndex) { 
      var oSettings = oTable.fnSettings(); 
      $("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1); 
      return nRow; 
     }, 
     "footerCallback": function (row, aData, start, end, iDisplayIndex) { 
     var api = this.api(), 
     data; 

      // 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 over all pages 
      total = api.column(4) 
      .data() 
      .reduce(function (a, b) { 
       return intVal(a) + intVal(b); 
      }); 

      // Total over this page 
      pageTotal = api.column(4, { 
       page: 'current' 
      }) 
      .data() 
      .reduce(function (a, b) { 
       return intVal(a) + intVal(b); 
      }, 0); 

      // Update footer 
      $(api.column(5).footer()).html(
      '$' + pageTotal + ' ($' + total + ' total)'); 
     } 
}); 
} 

Qui sta mostrando undefined.And anche non c'è che mostra l'errore. Ma l'output non viene mostrato. Ho attaccato la schermata di uscita ..

per ottenere i valori che cosa devo fare processo futher?

Answer 1

Utilizzare la sum plugin invece di reinventare la ruota :)

jQuery.fn.dataTable.Api.register('sum()', function () { 
    return this.flatten().reduce(function (a, b) { 
     if (typeof a === 'string') { 
      a = a.replace(/[^\d.-]/g, '') * 1; 
     } 
     if (typeof b === 'string') { 
      b = b.replace(/[^\d.-]/g, '') * 1; 
     } 
     return a + b; 
    }, 0); 
}); 

dal momento che si desidera semplicemente aggiornare una determinata colonna footer ogni tempo in cui la tabella viene ridisegnata, è sufficiente un semplice drawCallback:

drawCallback: function() { 
    var api = this.api(); 

    // Total over all pages 
    var total = api.column(4).data().sum(); 

    // Total over this page 
    var pageTotal = api.column(4, {page:'current'}).data().sum(); 

    $(api.column(5).footer()).html('$' + pageTotal + ' ($' + total + ' total)'); 
} 

Answer 2

@davidkonrad risposta è migliore della mia. Suggerisco di usare la sua risposta al posto mia per solo scopo di somma.

Questo codice può essere utilizzato per le operazioni doganali per esempio l'aggiunta di css ecc

1. È necessario disporre di tfoot nella tabella.
2. È possibile utilizzare la funzione di callback del piè di pagina fnFooterCallback nella versione 1.10.

Come utilizzare

"fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) { 
 
    //when working with pagination if you want to sum all records present in the current visible page only then use below if block 
 
    var iDisplayLength = parseInt(iEnd) - parseInt(iStart); 
 
    if (iStart != 0) { 
 
    iStart = iStart - iDisplayLength; 
 
    iEnd = aaData.length; 
 
    } 
 
    //columns start from 0, i took 1st column so the line --> aaData[aiDisplay[i]][1] 
 
    var iTarget = 0; 
 
    for (var i = iStart; i < iEnd; i++) { 
 
    iTarget += aaData[aiDisplay[i]][1] * 1; // because you get string in aaData[aiDisplay[i]][1] so multiplying with 1 gives number 
 
    } 
 
    // Modifying the footer row 
 
    var nCells = nRow.getElementsByTagName('th'); 
 
    nCells[1].innerHTML = parseInt(iTarget); 
 
}