2016-12-16 128 views
0

我正在使用jQuery DataTables,並且正在嘗試構建數據報告。顯示每行總數

我能夠通過使用footerCallback找到頁腳總計的解決方案,但我無法找到解決方案來獲得每行末尾的總計。

經過相當多的研究和試驗和錯誤,我想出了一些代碼,使用rowCallback,但是,這似乎並不高效。

這是我的dataTable中的部分。

"rowCallback": function(row, data, index) { 
    var tr = jQuery(row); 
    var d = tr.children(".sum"); 
    var a= []; 
    var c = jQuery.each(d, function(i,v){ 
     a.push(v.innerText); 
    }); 
    sum = a.reduce(function(a, b) { 
     var x = parseFloat(a) || 0; 
     var y = parseFloat(b) || 0; 
     return x + y; 
    }, 0); 

    jQuery('td:eq(4)', row).html(sum); 
},    

需要包含在總和中的單元格(td)具有一類總和。 就像我說的,這個工作,但是,這樣做必須有更好的方法。

+2

如果您的數據來自服務器並且是靜態的,您可以在服務器上執行計算並將其顯示爲另一個數據列,而不是在客戶端上執行。 –

回答

0

我同意Gyrocode,但這是我的解決方案,總結行和列的基礎。

   var mydt = [{ a: 1, b: 2, c: 3, d: 4 }, { a: 5, b: 6, c: 7, d: 8 }, { a: 10, b: 12, c: 13, d: 14 }]; 

       $(function ($) { 
        // $("#tbl").DataTable({ columns: [{ data: "id" }, { data: "text" }], dom: "tB", buttons: [{ text: "Load Me", action: function (e, dt, node, config) { loadme(e, dt, node, config); } }] }); 

        $("#tbl2").DataTable({ 
         data: mydt, columns: [{ data: "a" }, { data: "b" }, { data: "c" }, { data: "d" }, 
          { 
           data: function (xx, yy, zz, dd) { 
            var rt = 0; 
            $.each(xx, function (item, val) { rt += val; }); 
            return rt; 
           } 
          }], 
         initComplete: function (aaa, bbb, ccc) { 
          var th = $("#tbl2 tfoot th"); 
          for (var i = 0; i < 5; ++i) { 
           var sb = 0; 
           var col = $("#tbl2").DataTable().columns(i).data(); 
           for (var j = 0; j < col[0].length; ++j) { 
            sb += col[0][j]; 
           } 
           th[i].innerText = sb; 
          } 

         } 
        } 

        ); 

       } 
       ); 


      <div style="width:500px"> 
       <table class="display" id="tbl2"> 
        <thead> 
         <tr> 
          <th>A</th> 
          <th>B</th> 
          <th>C</th> 
          <th>D</th> 
          <th>t</th> 
         </tr> 
        </thead> 
        <tbody></tbody> 
        <tfoot> 
         <tr> 
        <th>0</th> 
        <th>0</th> 
        <th>0</th> 
        <th>0</th> 
        <th>0</th> 
        </tr> 
        </tfoot> 
       </table> 
      </div> 
+0

https://jsfiddle.net/bindrid/ks5a3aw9/3/g – Bindrid