jQueryのdatatableフッタとajax出力からの合計行

Question

fnFooterCallbackを使用して、合計で列の合計を計算しようとしていますが、私がまだ把握できない部分は、そのページの合計が必要ですaaDataからうまくいっています。

ajaxの出力を使ってaaDataに出力されたフッタをどのように表示するかについてのアイデアはありますか？

Answer 1

これが探しているものかどうかはわかりませんが、私はそれを打ちました。 、フッタに表示することがフッタに表示できるように<thead>と<tbody>

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

後にこのコードを配置するために

。

よりは開始にこれを追加します。

"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); 
} 

変更aaData[i][1]で数あなたが（ない1で、0で始まる）を計算したい列に。

注：行内に特殊文字があり、それをカットする必要がある場合、これは機能しません。

Answer 2

このコードはまた、作品とその使いやすく、理解する：

ブレード・ビューにこれを追加します。

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

番目の数字は行のあなたの量に依存します。あなたのjsの中

ザ・私はこのことができます願っていただ

table.dataTable({ 

前

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

このコードは、場所にする必要があり、このfooterCallbackを追加します。