各行の合計を表示

Question

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）は合計のクラスを持っています。 私が言ったように、これはうまくいくが、これを行うためのよりよい方法が必要である。

Answer 1

私はジャイロコードに同意しますが、ここで私の解決策は、行と列に基づいています。

   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>