jquery Datatable Fußzeile mit Gesamtzeilen von der Ajax-Ausgabe

Question

Ich versuche, die Summe in einer Spalte mit dem FnFooterCallback zu summieren, der Teil, den ich noch nicht herausfinden kann, ist, dass ich die Summe für diese Seite brauche was ich aus der aaData gut bekomme.

Gibt es eine Idee, wie die Fußzeile mit der Ausgabe angezeigt wird, die wir in aaData mit Ajax-Ausgabe bekommen haben?

Answer 1

Nicht sicher, ob das ist, was Sie suchen, aber ich gebe es eine Chance.

Um in der Fußzeile, diesen Code nach dem <thead> und <tbody>

<tfoot> 
    <tr> 
    <th>Total:</th> 
    <th></th> 
    </tr> 
</tfoot> 

So kann es in der Fußzeile angezeigt werden angezeigt.

als fügen Sie diese zur Einleitung:

"fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) { 
    /* 
    * Calculate the total market share for all browsers in this table (ie inc. outside 
    * the pagination) 
    */ 
    var iTotalMarket = 0; 
    for (var i=0 ; i<aaData.length ; i++) 
    { 
     iTotalMarket += aaData[i][1]*1; 
    } 

    /* Calculate the market share for browsers on this page */ 
    var iPageMarket = 0; 
    for (var i=iStart ; i<iEnd ; i++) 
    { 
     iPageMarket += aaData[ aiDisplay[i] ][1]*1; 
    } 

    /* Modify the footer row to match what we want */ 
    var nCells = nRow.getElementsByTagName('th'); 
    nCells[1].innerHTML = parseInt(iPageMarket); 
} 

Änderung der Zahl in den aaData[i][1], auf die Spalte, die Sie berechnen möchten (von 0 beginnend, nicht durch 1).

Hinweis: Dies funktioniert nicht, wenn Sie ein Sonderzeichen in der Zeile haben, müssen es schneiden.

Answer 2

Dieser Code funktioniert auch und sein einfacher zu bedienen und zu verstehen:

fügen Sie diese Ansicht zu Ihrer Klinge:

<tfoot> 
    <tr> 
     <th>Total:</th> 
     <th></th> 
    </tr> 
</tfoot> 

Die Zahlen von th hängt von Ihrer Quantität von Zeilen.

Die in Ihrem js hinzufügen, um dieses footerCallback

"footerCallback": function (row, data, start, end, display) { 
         var api = this.api(), data; 


         var intVal = function (i) { 
          return typeof i === 'string' ? 
           i.replace(/[\$,]/g, '')*1 : 
           typeof i === 'number' ? 
            i : 0; 
         }; 

         // This is for the Total text 
         var col0 = api 
          .column(0) 
          .data() 
          .reduce(function (a, b) { 
           return intVal(a) + intVal(b); 
          }, 0); 
        //First, please note var name col1 and we use it then 
        var col1 = api 
         .column(1) 
         .data() 
         .reduce(function (a, b) { 
          return intVal(a) + intVal(b); 
         }, 0); 

        $(api.column(0).footer()).html('Total'); 
        // Here you can add the rows 
        $(api.column(1).footer()).html(col1); 
        }, 

Dieser Code Ort sein muss kurz vor

table.dataTable({ 

Ich hoffe, das hilft.