각 행의 합계를 표시합니다.

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

나는 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>