jquery datatable footer與ajax輸出總行數

Question

我想使用fnFooterCallback來總結一個colum中的總數，我找不到的部分是，我需要該頁的總數我會從aaData中獲益。

任何想法如何顯示頁腳與我們在aaData中使用ajax輸出得到的輸出？

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]數量要計算（由0開始，而不是1）列。

注意：如果在行中有特殊字符，將不需要剪切它。

Answer 2

此代碼也可以和它更容易使用和理解：

添加到您的刀片觀點：

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

的數字屆取決於你行的數量。

的在你的js之前

table.dataTable({ 

添加此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); 
        }, 

此代碼需要的地方，我希望這會有所幫助。