Nested table not recognized as DataTable

nava1021

Hi,

Scenario : Nested DataTable

I have a master datatable (#stock_summary) and nested details tables (made at runtime) when individual rows at the master datatable are clicked. I used callback functions on initComplete event to decorate the "td" cells with the CSS

There appears the *Cannot reinitialise ... * warning message when callback for the details table is being called.
Later in the console I checked with $.fn.dataTable.isDataTable('#nested_id') which returns false. But the table is displayed already with the respecitve ID generated on the fly.

However, the callback function in the main table runs smothly and applies the CSS decorations .

Here is the callback function

  //table decoration callback
  var myCallback1 = function (tbl_id) {    
      var tbl = ( '#' + tbl_id );          
        var api = $(tbl).DataTable();     
        api.$('tr').each( function (i) {       
          fnApplyCSS($(this), 5);
          fnApplyCSS($(this), 4);
        })    
     
  };

Any assistance?

Debug url : http://debug.datatables.net/ijuceg

nava1021

Update

The same works when callback is called inside the DataTable implementation.

   initComplete: function(){
                var api = this.api();              
                api.$('tr').each( function (i) {       
                  fnApplyCSS($(this), 5);
                  fnApplyCSS($(this), 4);
                });    
              },

Only I encountered the issue when using external callback function like following. Give Can't reinitialize datatable... error

var table_id = some_id
initComplete : myCallback (table_id)

//callback implementation
var myCallback = function ( table_id ) {
    var api = $('#' + table_id).DataTable();          
    api.$('tr').each( function (i) {
       fnApplyCSS($(this), 5);
       fnApplyCSS($(this), 6);
       fnApplyCSS($(this), 7);
   });
  }