footer jquery datatable với tổng số hàng từ đầu ra ajax

Question

Tôi đang cố gắng sử dụng fnFooterCallback để tổng số tiền trong một cột như một tổng số, phần mà tôi không thể tìm ra được, rằng tôi cần tổng số cho trang đó mà tôi nhận được tiền phạt từ aaData.

Bất kỳ ý tưởng nào về cách hiển thị chân trang với đầu ra chúng tôi có trong aaData bằng cách sử dụng đầu ra ajax?

Answer 1

Không chắc chắn nếu đây là những gì bạn đang tìm kiếm nhưng tôi cho nó một shot.

Để hiển thị ở chân, đặt mã này sau khi <thead> và <tbody>

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

Vì vậy, nó có thể được hiển thị ở chân.

Thần thêm video này vào thời điểm bắt đầu:

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

thay đổi số trong aaData[i][1] mà cột bạn muốn tính toán (bắt đầu bằng 0, không phải bằng 1).

Lưu ý: Điều này sẽ không hoạt động nếu bạn có một ký tự đặc biệt trong hàng, sẽ cần phải cắt nó.

Answer 2

Mã này cũng làm việc và nó dễ dàng hơn để sử dụng và hiểu:

thêm video này vào xem lưỡi của bạn:

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

Số lượng thứ phụ thuộc vào số lượng của bạn hàng.

Các trong js của bạn thêm footerCallback này

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

Mã này cần phải được diễn ra ngay trước khi

table.dataTable({ 

Tôi hy vọng điều này sẽ giúp.