How to add checkbox in datatables for row grouping?

Question

My code is like this : http://jsfiddle.net/rkovmhkp/3/

     ...

       }).rowGrouping({
                    fnOnGrouped: function(groups){
                        console.log("Groups", groups);

                        for(key in groups){
                            if(groups.hasOwnProperty(key)){
                               $(groups[key].nGroup).css('background-color', '#F99');
                            }
                        }                   
                    }
                }); 

      ...

I want add checkbox in the upper left corner. When user check the checkbox, The system will show row grouping datatables. When user uncheck the checkbox, The system will show datatables without row grouping. Thank you

Answer 1

SOLUTION

Use the code below:

$(document).ready(function () {    
   initTable(true);

   $('.btn-row-grouping-enable').on('click', function(){       
      if(!this.checked){ 
          removeRowGrouping('#example');
      }

      initTable(this.checked);          
   });

});

function initTable(hasRowGrouping){   
     $('#example').dataTable({
         "bDestroy": true,
         "bLengthChange": false,
         "bPaginate": false,
         "bJQueryUI": true,
         "fnCreatedRow": function (nRow, aData, iDataIndex){
             $(nRow).css('background-color', /*oData.colour*/ '#99F');
         }
     });

     if(hasRowGrouping){
        $('#example').dataTable().rowGrouping({
           fnOnGrouped: function (groups) {
              console.log("Groups", groups);

              for (key in groups) {
                 if (groups.hasOwnProperty(key)) {
                     $(groups[key].nGroup).css('background-color', '#F99');
                 }
              }
          }
        });
     }
}

// Remove rowGrouping plugin
function removeRowGrouping(selector){
   var oSettings = jQuery(selector).dataTable().fnSettings();

   for (f = 0; f < oSettings.aoDrawCallback.length; f++) {
      if (oSettings.aoDrawCallback[f].sName == 'fnRowGrouping') {
           oSettings.aoDrawCallback.splice(f, 1);
           break;
      }
   }

   oSettings.aaSortingFixed = null;              
}

DEMO

See this jsFiddle for code and demonstration.

LINKS

• datatables remove rowgrouping