jquery datatables - tổng các cột trong một nhóm

Question

Tôi đang gần như nhận được chính xác những gì tôi muốn, chỉ cần một chút trợ giúp.

Tôi đang nhóm làm việc. Bây giờ tôi muốn tổng hợp các cột cho mỗi nhóm và hiển thị tổng số trong tiêu đề nhóm. Dưới đây là một jsfiddle của nó vì nó dễ dàng hơn để hiển thị những gì tôi đang cố gắng để làm:

http://jsfiddle.net/RgKPZ/123/

Mã liên quan:

$(function() { 
      oTable = $('#job_history').dataTable({ 

       "aoColumnDefs": [ 
        { "bVisible": false, "aTargets": [ 4,5,6 ] }, 
       ], 
       "aLengthMenu": [[10, 25, 50, -1], ["Show 10 entries", "Show 25 entries", "Show 50 entries", "Show all entries"]], // options in the show rows selector 
       "iDisplayLength" : -1, // show all rows by default 
       "aaSortingFixed": [[ 5, 'asc' ]], 
       "aaSorting": [[ 5, 'asc' ]], 
       "bJQueryUI": true, 
       "sDom": '<flip>', // filter, length, info, pagination 

       "oLanguage": { 
        "sSearch": "", // label for search field - see function below for setting placeholder text 
        "sLengthMenu": "_MENU_", // label for show selector { "sLengthMenu": "Display _MENU_ jobs" } 
        "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries.", // string for information display 
        "sInfoEmpty": "No entries to show", // what to show when info is empty 
        "sInfoFiltered": " (Filtering from _MAX_ entries.)", 
        "sEmptyTable": "There are no entries matching the search criteria.", // shown when table is empty, regardless of filtering 
        "sZeroRecords": "", // shown when nothing is left after filtering 
       }, 

       "fnDrawCallback": function (oSettings) { 
        if (oSettings.aiDisplay.length == 0) 
        { 
         return; 
        } 

        var nTrs = $('#job_history tbody tr'); // get all table rows 
        var iColspan = nTrs[0].getElementsByTagName('td').length; 
        var sLastGroup = ""; 
        var summed_minutes = 0; 

        for (var i = 0; i < nTrs.length; i++) 
        { 
         var iDisplayIndex = oSettings._iDisplayStart + i; 
         var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[ 5 ]; 

         if (sGroup != sLastGroup) 
         { 
          var nGroup = document.createElement('tr'); 
          var nCell = document.createElement('td'); 
          nCell.colSpan = iColspan; 
          nCell.className = "group"; 

          summed_minutes += oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[ 7 ]; 
          nCell.innerHTML = sGroup + summed_minutes; 
          nGroup.appendChild(nCell); 
          nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]); 
          sLastGroup = sGroup; 
         } 
        } 
       } 

      }); 

     }); 

Vấn đề duy nhất là các cột tôi muốn tổng hợp aren không được thêm vào với nhau. Các giá trị đang được hiển thị, nhưng giống như một chuỗi thay vì thêm cùng nhau như số. Ngoài ra, không phải tất cả các giá trị đều được hiển thị dưới dạng chuỗi - có lặp lại đang diễn ra. Tôi đã thử chuyển đổi bằng cách sử dụng Number() và parseInt() nhưng không có may mắn. Tôi đang cố gắng để đưa điều này vào chức năng gọi lại (như chức năng nhóm) để các giá trị sẽ được tổng hợp sau mỗi bộ lọc bảng, quá.

Tôi chắc chắn rằng tôi chỉ có sai hoặc sai địa điểm hoặc điều gì đó, nhưng tôi không thể hiểu được. Bực bội! :-(

TIA, Matt

Answer 1

Hãy thử này ...

Thay đổi tất cả <div id='group_sum'>0</div>-<div class='group_sum'></div> vì id phải là duy nhất. Nên sử dụng lớp

Xem nó trong fiddle

$(function() { 
    var oTable = $('#job_history').dataTable({ 
     "aoColumnDefs": [{ "bVisible": false, "aTargets": [4, 5, 6]}], 
     "aLengthMenu": [[10, 25, 50, -1], ["Show 10 entries", "Show 25 entries", "Show 50 entries", "Show all entries"]], 
     "iDisplayLength": -1, 
     "aaSortingFixed": [[5, 'asc']], 
     "aaSorting": [[5, 'asc']], 
     "bJQueryUI": true, 
     "sDom": '<flip>', 
     "fnDrawCallback": function(oSettings) { 
      if (oSettings.aiDisplay.length == 0) { 
       return; 
      } 

      // GROUP ROWS 
      var nTrs = $('#job_history tbody tr'); 
      var iColspan = nTrs[0].getElementsByTagName('td').length; 
      var sLastGroup = ""; 

      for (var i = 0; i < nTrs.length; i++) { 
       var iDisplayIndex = oSettings._iDisplayStart + i; 
       var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[5]; 

       if (sGroup != sLastGroup) { 
        var nGroup = document.createElement('tr'); 
        var nCell = document.createElement('td'); 
        nCell.colSpan = iColspan; 
        nCell.className = "group"; 
        nCell.innerHTML = sGroup; 
        nGroup.appendChild(nCell); 
        nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]); 
        sLastGroup = sGroup; 
       } 
      } 
      //------------------------------------------------- 
      // SUM COLUMNS WITHIN GROUPS 
      var total = 0; 
      $("#job_history tbody tr").each(function(index) { 
       if ($(this).find('td:first.group').html()) { 
        total = 0; 
       } else { 
        total = parseFloat(total) + parseFloat(this.cells[4].innerHTML); 
        $(this).closest('tr').prevAll('tr:has(td.group):first').find("div").html(total); 
       } 
      }); 
      //------------------------------------------------- 
     } 
    }); 
});