Datatable row grouping through drawcallback()

kanchinik

Hello - I have been trying to follow this approach of row grouping described in the following link. http://www.datatables.net/examples/advanced_init/row_grouping.html

However while implementing the drawCallback function I had to change the name to "fnDrawCallback" for my datatable to recognize this function and also declare var api as var api = this.oApi._fnGetTrNodes( settings ); instead of the way described in the example (var api = this.api();) as otherwise I was getting an error. However now I am still getting a similar error while defining the rest of function if I follow the syntax and keywords given in the example. That is ,

var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
             api.column(2, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );

The error I get is "undefined is not a function " for the drawCallback function. I tried a lot trying to find a different way of writing the same function but I cannot understand why this doesn't work and why I had to change the api declaration too.

I am very new to this , so if someone could explain what the correct format would be to write this function without this error I would really appreciate it !

Please find my Jquery part listed below. Thanks in advance !!
```js

$(document).ready(function(){
var oTable = $("#tableTenants").dataTable({
"bProcessing": true,

    "sAjaxSource": "/api/alltenantstatistic.json?iDisplayStart=0&iDisplayLength=${totalCount}&sSortDir_0=asc",
    "aoColumns": [

                  { "mDataProp": "state","sClass": "student_rows" , "sWidth":"1%" },
                  { "mDataProp": "name","sClass": "student_rows" , "sWidth":"20%"},
                  { "mDataProp": "testAdmin","sClass": "student_rows" , "sWidth":"70%"},
                  { "mDataProp": "totalStudentCount","sClass": "select_rows" , "sWidth":"2%", "bSortable": false },
                  { "mDataProp": "totalPnPStudentCount","sClass": "select_rows" , "sWidth":"2%", "bSortable": false }
                 ],

    "aoColumnDefs": [
                    {   "fnRender": function(oObj) {
                              return '<a href="#">' + oObj.aData.state + '</a>';

                             },
                        "bUseRendered": false,
                        "aTargets": [0]
                     },
                    {   
                        "aTargets": [1],
                         "bVisible": false
                    },
                        ],                  
                    "iDisplayLength": 10,
                    "order": [[ 1, 'asc' ]],
                     "fnDrawCallback": function ( settings ) {
                         console.log("hello");
                         var api = this.oApi._fnGetTrNodes( settings ); // Had to change this from this.api();
                         var rows = api.rows({page:'current'}).nodes(); // Giving an error 
                                                     var last=null;
                                                      api.column(1, {page:'current'} ).data().each( function ( group, i ) {
                                                      if ( last !== group ) {
                                                              $(rows).eq( i ).before(
                                                                 '<tr class="group"><td colspan="4">'+group+'</td></tr>'
                                                       );

                last = group;
            }
        } );

                     }, 
                    "bLengthChange": true,
                    "bFilter": true,
                    "bAutoWidth": false,
                    //"bStateSave": true,
                    "sDom": "<'row-fluid'<'span5'l><'span7'f><'span2'>r>t<'row-fluid'<'span6'i><'span6'p>>",

                    "sPaginationType":  "bootstrap",
                    "oLanguage": {
                        "sLengthMenu": "_MENU_",
                        "sEmptyTable": "No Organization Uploads available for this Tenant",
                        "sInfoEmpty": "",
                        "sProcessing": "Loading..."
                    }
});

```js

mjdinsmore

I think the change you'd need to make is on line 28. You probably want something more like (replacing line 28):

var api = this.api();

on a side note, all the Hungarian notation was removed in the latest version of DataTables, and I'd suggest you go with that too, i.e.:

"filter" : true,

"autoWidth" : true,

"drawCallback": function (settings) {

...

}