jquery datatables - сумма столбцов внутри группы

Question

Я так близок к тому, чтобы получить именно то, что хочу, просто нужно немного помочь.

У меня есть группировка. Теперь я хочу суммировать столбцы для каждой группы и отображать общее количество в заголовке группы. Вот jsfiddle его, так как это проще, чтобы показать то, что я пытаюсь сделать:

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

Соответствующий код:

$(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; 
         } 
        } 
       } 

      }); 

     }); 

Единственная проблема заключается в том, что столбцы, которые я хочу подвести Арен не добавляя вместе. Значения отображаются, но, как строка, вместо добавления вместе чисел. Кроме того, не все значения даже отображаются в виде строки - повторяются повторы. Я попытался преобразовать, используя Number() и parseInt(), но не повезло. Я пытаюсь включить это в функцию обратного вызова (например, функцию группировки), чтобы значения были суммированы после каждого фильтра таблицы.

Уверен, что у меня просто переменная неправильная или не в том месте или что-то в этом роде, но я просто не могу понять это. Разочарочно близко! :-(

ТИА, Matt

Answer 1

Попробуйте это ...

<div id='group_sum'>0</div> Изменить все, чтобы <div class='group_sum'></div> потому что идентификатор должен быть уникальным. Так что используйте класс

Смотрите в 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); 
       } 
      }); 
      //------------------------------------------------- 
     } 
    }); 
});