0

I'm trying to group datatables using SharePoint List RESTAPI and I get to accomplish level grouping and I want to group level two as subgroup. Please let me know if that's possible. The picture below shown is collapsed view of the grouping. I want sub group below that using another column (lets say column two). Current is grouped by column 1. Any help is appreciated.

      "drawCallback": function ( settings ) {
          var api = this.api();
          var rows = api.rows( {page:'current'} ).nodes();
          var lastGroup=null;
          var lastSub = null;  
          var subtotal = new Array();
          var groupid = -1;     
          var column = api.row(0).data().length;   
          api.column(0).data().each( function ( group, i ) {        
               var rowCount = $(this).nextUntil('.group').length;                                           
              if ( lastGroup !== group ) {                         
                                    groupid++;             

         $(rows).eq(i).before($("<tr></tr>",  {"colspan":4,"class": "group","data-id": group }).append($("<td ></td>",
                                              {"colspan":4,"class": "rowstyle","text": "+/- Directorate :  " + group})).append($("<td ></td>", 
                                              {"id": "a" + group,"class": "group","text": "0"})).append($("<td></td>", 
                                              {"id": "b" + group,"class": "group","text": "0"})).append($("<td></td>", 
                                              {"id": "c" + group,"class": "group","text": "0"})).append($("<td ></td>",
                                              {"id": "d" + group,"class": "group","text": "0"})).append($("<td></td>", 
                                              {"id": "e" + group,"class": "group","text": "0"})).append($("<td></td>",                                                                                            
                                              {"id": "f" + group,"class": "group","text": "0"})).prop('outerHTML'));
                  lastGroup = group;   

              }                    

              val = api.row(api.row($(rows).eq(i)).index()).data(); 

     $("#a" + val.Column1).text(parseFloat($("#a" + val.Column1).text()) + parseFloat(val.Column1)); 
     $("#b" + val.Column2).text(parseFloat($("#b" + val.Column2).text()) + parseFloat(val.Column2)); 
     $("#c" + val.Column3).text(parseFloat($("#c" + val.Column3).text()) + parseFloat(val.Column3)); 
     $("#d" + val.Column4).text(parseFloat($("#d" + val.Column4).text()) + parseFloat(val.Column4));
     $("#e" + val.Column5).text(parseFloat($("#e" + val.Column5).text()) + parseFloat(val.Column5);  
     $("#f" + val.Column6).text(parseFloat($("#z" + val.Column6).text()) + parseFloat(val.Column6));  
              });   

$('#example tbody').find('.group').each(function (i,v) {
            var rowCount = $(this).nextUntil('.group').length;                  
            $(this).find('td:first').append($('<span />', { 'class': '' }).append($('<b />', { 'text': '('+rowCount+')' })));
                       var subtd = '';
                      for (var a=0;a<column-1;a++)
                      {         subtd += '<td>'+subtotal[i][a]+'</td>';              }
                      $(this).append(subtd); //console.log(rowCount);
              });                      

       $('#example tbody tr.group').nextUntil('.group').toggleClass('hidden');
        $('#example tbody').on( 'click', 'tr.group', function () {
             var rowsCollapse = $(this).nextUntil('.group');            
               $(rowsCollapse).toggleClass('hidden');    });

     $('#example tbody tr td').each(function(){                 var tdVal = $(this).text(); 
          if(tdVal == '0'){    $(this).css('color','red', 'font-weight','bold');     }
          else if(tdVal == '1')   {  $(this).css('color','green', 'font-weight','bold');  }   });              

},enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.