jquery डेटाटेबल्स - समूह के भीतर योग कॉलम

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

      }); 

     }); 

केवल समस्या यह है कि कॉलम मैं योग करने के लिए चाहते हैं नहीं कर रहे है एक साथ जोड़ा जा रहा है। मान प्रदर्शित किए जा रहे हैं, लेकिन संख्याओं की तरह एक साथ जोड़ने की बजाय एक स्ट्रिंग की तरह। साथ ही, सभी मानों को स्ट्रिंग के रूप में भी प्रदर्शित नहीं किया जा रहा है - दोहराने जा रहे हैं। मैंने संख्या() और parseInt() का उपयोग करके कनवर्ट करने की कोशिश की लेकिन कोई किस्मत नहीं। मैं इसे कॉलबैक फ़ंक्शन (समूहबद्ध फ़ंक्शन की तरह) में डालने की कोशिश कर रहा हूं ताकि प्रत्येक तालिका फ़िल्टर के बाद मूल्यों को भी सारांशित किया जा सके।

मुझे यकीन है कि मेरे पास सिर्फ एक चर गलत है या गलत जगह या कुछ है, लेकिन मैं इसे समझ नहीं सकता। निराशाजनक रूप से बंद करो! :-(

TIA, मैट

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); 
       } 
      }); 
      //------------------------------------------------- 
     } 
    }); 
}); 

करते हुए देखें