How to impelement row grouping function for datatables?

JN9527

As title, I want to implement row grouping funciton which likes the sql grouping function for datatables, I can use ordering or searching for grouping row or subgroung row. Is there any solution for dataTables?

Actually I hv implemented row grouping for datatables using a plugin. But the ordering funtion for grouping row is not working, but working for subgroup row. Is any solution better than mine.

The plugin name is "jquery.dataTables.rowGrouping.js"
Here the code is implementation of grouping row infomation.

                dataTableOptions.drawCallback=function(settings) {
                    //列表名
                    var colName = ['page_name_type','dim_position','dim_position_name',            //0,1,2
                                   'new_user_click_rate','heavy_man_click_rate','s90s_click_rate','s70s_click_rate','general_click_rate','total_click_rate',   //3,4,5,6,7,8
                                   'new_user_uv','heavy_man_uv','s90s_uv','s70s_uv','general_uv','total_uv',                                                   //9,10,11,12,13,14
                                   'new_user_channel_uv','heavy_man_channel_uv','s90s_channel_uv','s70s_channel_uv','general_channel_uv','total_channel_uv',   //15,16,17,18,19,20
                                   'dim_position_desc',                                                                                                        //21
                                   'new_user_exposure_pv','heavy_man_exposure_pv','s90s_exposure_pv','s70s_exposure_pv','general_exposure_pv','total_exposure_pv',    //22,23,24,25,26,27,28
                                   'new_user_pv','heavy_man_pv','s90s_pv','s70s_pv','general_pv','total_pv',                                                          //29,30,31,32,33,34,35
                                   'new_user_sale_amount','heavy_man_sale_amount','s90s_sale_amount','s70s_sale_amount','general_sale_amount','total_sale_amount',    //36,37,38,39,40,41,42
                                   'new_user_user_num','heavy_man_user_num','s90s_user_num','s70s_user_num','general_user_num','total_user_num'];                     //43,44,45,46,47,48,49
                    var selectOption = _.union(GetCheckBoxSelect('clickRateIndex').split(','),GetCheckBoxSelect('clickUvIndex').split(','),GetCheckBoxSelect('channelUvIndex').split(','),GetCheckBoxSelect('exposureIndex').split(','),GetCheckBoxSelect('clickPvIndex').split(','),GetCheckBoxSelect('saleAmtIndex').split(','),GetCheckBoxSelect('userNumIndex').split(','));
                    $('.group').each(function(key,value){
                        $(this).find('span').text($(this).find('span').text().split('-')[1]);
                        var groupSumData = _.where(pageData.mainTableData,{dim_position_name:"总体", dim_position:$(this).find('span').text()});
                        if(groupSumData.length>0){
                            $(this).attr('colspan','2'); 
                            $(this).parent().append('<td>'+ groupSumData[0].dim_position_name +'</td>');
                            for(var i=0;i<selectOption.length;i++){
                                if(selectOption[i]!==""){
                                    if(selectOption[i]==='3' || selectOption[i]==='4' || selectOption[i]==='5' || selectOption[i]==='6' || selectOption[i]==='7' || selectOption[i]==='8'){
                                        $(this).parent().append('<td>'+ light.renderFunc.rateFormat(groupSumData[0][colName[parseInt(selectOption[i])]]) +'</td>'); 
                                    }else{
                                        $(this).parent().append('<td>'+ light.renderFunc.commasInt(groupSumData[0][colName[parseInt(selectOption[i])]]) +'</td>');  
                                    }                                           
                                }                                   
                            }
                            $(this).parent().append(_.template('<td><a class="table-btn" href="#" onclick="showTrendency(\'<%= dim_app_name %>\',\'<%= dim_fst_source %>\',\'<%= dim_sec_source %>\',\'<%= dim_thr_source %>\',\'<%= page_name_type %>\',\'<%= dim_position %>\', \'<%= dim_position_name %>\',event)"><span class="icon-view"></span>查看</a></td>')(groupSumData[0]));
                            $(this).parent().find('td').addClass('group').addClass('text-right');
                            $(this).removeClass('text-right');                      
                        }
                    });
                }