doubt regarding inner row

Srilakshmi · May 2014

My Inner row function is as follows,

function format ( d ) {
      
    var str='<div class="tabbable "><ul class="nav nav-tabs"><li class="active"><a href="#pane1" data-toggle="tab" ><span class="blueText">Details </span></a></li></ul><div class=" tab-content "><div id="pane1" class="tab-pane active tabBorder "><div class="row"><div class="col-md-7"> <table id="innerTable" class=" table table-condensed table-hover " ><thead ><tr><th class=" innerTableHeader">Host</th><th class=" innerTableHeader"># of Services</th><th class=" innerTableHeader" style="color:green;"><span >Ok</span></th><th class=" innerTableHeader" style="color:red;">Critical</th> <th class=" innerTableHeader" style="color:orange;"><span>Warning</span></th><th class=" innerTableHeader" style="color:rgb(102,0,102);">Unreachable</th><th class=" innerTableHeader">Status</th><th class=" innerTableHeader">Maintenence</th></tr> </thead><tbody  class="scrollContent">';
    var length=d['nodes'].length;
    console.log(length);
    
    for(var i=0;i<length;i++)
    {
        var nodeReq=d['nodes'][i];
        var json = JSON.stringify(nodeReq);
        console.log("print the inner node"+json);
        //var nodeReq1=d['nodes'][0];
        //var json = JSON.stringify(nodeReq1);
        //var trial = nodeReq1['NODE_NAME']
        //alert(trial);
        var send = nodeReq['NODE_NAME'] ;
        var x;
        str=str+ '<tr><td class=" blueText"><div><a onclick=\'myFunction("'+send+'")\' href="#">'+nodeReq['NODE_NAME'] +'</a></div></td><td>'+nodeReq['PROCESS_COUNT'] +'</td><td  style="color:green;">'+nodeReq['PROCESS_UP'] +'</td><td  style="color:red;">'+nodeReq['PROCESS_DOWN'] +'</td><td >'+nodeReq['PROCESS_WARNING'] +'</td><td  style="color:rgb(102,0,102);">'+nodeReq['PROCESS_UNREACHABLE'] +'</td><td >'+nodeReq['STATUS'] +'</td><td class=" blueText"><a>Raise alert</a></td></tr>';
        
         
        
    
    }
    
    for(var i=0;i<length;i++)
    {
    var dataToFrame =nodeReq['CLUSTER_NAME'];
    
    str+= '</tbody></table></div><iframe class="col-md-5 hov-graph" src="tabs_am.html?somedata='+dataToFrame+'"frameBorder="0"></iframe></div></div></div></div>';
    return str; 
    
    
    }
    
    
}

The above inner row code has 2 parts table and iframe part

initially I am sending dataToFrame = nodeReq['CLUSTER_NAME']; to the iframe(i.e

<

iframe class="col-md-5 hov-graph" src="tabs_am.html?somedata='+dataToFrame+'"frameBorder="0">) now when I click on anchor tag (i.e <a onclick=\'myFunction("'+send+'")\' href="#">'+nodeReq['NODE_NAME']</a> ) ,that is c1 ( if c1 is the first col element of the inner table ) , I need to send the value of the anchor tag nodeReq['NODE_NAME'] (i,e a) to the iframe (i.e

<

iframe class="col-md-5 hov-graph" src="tabs_am.html?somedata='+nodeReq['NODE_NAME'] +'"frameBorder="0"> ).

Looking forward for a reply,
Srilakshmi.

allan · May 2014

Hi Srilakshmi,

Something has gone very funky with the formatting there as the forum is now using Markdown syntax. However, it looks to me like what you have probably should work - at least in so much as that the variable will be passed as a GET parameter to your iframe, which I guess is what you are looking for. Does it not work?

The only obvious error I see is that there isn't a space before frameBorder which might be causing a problem.

Allan

Srilakshmi · May 2014

Hi Allan ,
the above code works fine ,
My above code(inner row) has 2 parts inner table and iframe part ,
the first colum elements(inner table) is an anchor tag now when I click on it , the value of it should be reflected on the iframe part that is value of it should be passed to the iframe.
but initially a default variabe is sent to the iframe(that's what above code does),
It would be nice if u can provide a similar example.
Looking forward for a reply,
Srilakshmi

allan · May 2014

I think I understand - just to check, you want to display two links which control what is displayed in the iframe. Is that correct?

Allan

Srilakshmi · May 2014

yes Allan u r right.... looking forward for a reply...

Srilakshmi · May 2014

waiting for a reply :)

allan · May 2014

Excellent - thanks for confirming that.

I would approach it slightly differently to avoid the use of DOM0 events. Assign the data to the link tag using HTML5 data-* attributes so it knows what to tell the iframe to do, but also use a single jQuery event handler which will trigger the page change. This is what I've put together:

function format(d) {
    var str = '<div class="tabbable "><ul class="nav nav-tabs"><li class="active"><a href="#pane1" data-toggle="tab" ><span class="blueText">Details </span></a></li></ul><div class=" tab-content "><div id="pane1" class="tab-pane active tabBorder "><div class="row"><div class="col-md-7"> <table id="innerTable" class=" table table-condensed table-hover " ><thead ><tr><th class=" innerTableHeader">Host</th><th class=" innerTableHeader"># of Services</th><th class=" innerTableHeader" style="color:green;"><span >Ok</span></th><th class=" innerTableHeader" style="color:red;">Critical</th> <th class=" innerTableHeader" style="color:orange;"><span>Warning</span></th><th class=" innerTableHeader" style="color:rgb(102,0,102);">Unreachable</th><th class=" innerTableHeader">Status</th><th class=" innerTableHeader">Maintenence</th></tr> </thead><tbody  class="scrollContent">';
    var length = d['nodes'].length;
    console.log(length);

    for (var i = 0; i < length; i++) {
        var nodeReq = d['nodes'][i];
        var json = JSON.stringify(nodeReq);
        var x;
        str += '<tr>'+
            '<td class=" blueText">'+
                '<div>'+
                    '<a class="iframe-action" data-node-name="'+nodeReq['NODE_NAME']+'" href="#">' + nodeReq['NODE_NAME'] + '</a>'+
                '</div>'+
            '</td>'+
            '<td>' + nodeReq['PROCESS_COUNT'] + '</td>'+
            '<td style="color:green;">' + nodeReq['PROCESS_UP'] + '</td>'+
            '<td style="color:red;">' + nodeReq['PROCESS_DOWN'] + '</td>'+
            '<td>' + nodeReq['PROCESS_WARNING'] + '</td>'+
            '<td style="color:rgb(102,0,102);">' + nodeReq['PROCESS_UNREACHABLE'] + '</td>'+
            '<td>' + nodeReq['STATUS'] + '</td>'+
            '<td class=" blueText">'+
                '<a>Raise alert</a>'+
            </td>
        '</tr>';
    }

    var dataToFrame = d['nodes'][0]['CLUSTER_NAME'];
    str += '</tbody></table></div><iframe class="col-md-5 hov-graph" src="tabs_am.html?somedata=' + dataToFrame + '"frameBorder="0"></iframe></div></div></div></div>';

    return str;
}

// IN YOUR DOCUMENT.READY FUNCTION:

$(document).on( 'click', 'a.iframe-action', function (e) {
    e.preventDefault();

    var iframe = $(this).closest('div.tabbable').find('iframe')[0];
    iframe.src = 'tabs_am.html?somedata='+$(this).data('node-name');
} );

I havne't tested it since I don't have your system to test with, but I think it should work! Let me know if you have any questions.

Allan

Srilakshmi · May 2014

Thanks Allan its working... :-)

Srilakshmi · May 2014

Hi Allan

1)I have select list based on the selected value of it I am reinitializing the datatable
by using $('#example').dataTable().fnDestroy(); ,(the reinitialized datatable has the same columns as that of the previous table ).
i want the datatable to have the following properties(in the code below)(it is same as it had for the previous table), for that
i call the entire properties after reinitializing it, can u show to how call a single function(which is used for the previous
table) so that reinitialized table will have the same properties as that of the previous table.(i am not able to do this, so
i repeat the code @ theselected list point for it to work ).

function properties()
{
$('#example tbody').on('click', 'tbody tr', function(event) {
        $(this).addClass('highlight').siblings().removeClass('highlight');
    });
    var table = $('#example').DataTable( {
       "sPaginationType": "full_numbers",
         "sDom": '<"top"f>rt<"bottom"ilp><"clear">',
        "sScrollY": "440px",
        
        "aaData" : MasterProducts,
        
        "aoColumns" : [{
                        mData : "CLUSTER_NAME"
                    }, {
                        mData : "NODE_COUNT"
                    },{
                        mData : "maintenance"
                    },null],
        columnDefs: [ {
      className:      'details-control',
      orderable:      false,
      data:           null,
      defaultContent: '',
     
      
      targets:        -1
    },
    {
        targets: 0,
        render: function ( data, type, row ) {
          return type === 'display' ?
            '<a title="'+data+'">'+data+'</a>' :
            data;
        }
        
        },
    {
     
      "sWidth": "37%",
      
      targets:   2
    },
    ],
    orderCellsTop: true,
  } );
      
 
  // Add event listener for opening and closing details
  $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).parents('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Close any currently open rows
            table.rows().eq( 0 ).each( function ( idx ) {
              if ( table.row( idx ).child.isShown() ) {
                table.row( idx ).child.hide();
                $( table.row( idx ).node() ).removeClass('shown');
              }
            } );
          
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
 $('#example.table-striped123').on( 'click', '>tbody>tr', function () {
 if ( table.row( this ).length === 0 ) {
  return;
}
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );

$('#innerTable.innerTable').on( 'click', '>tbody>tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );    
} );

}
2)How to have fixed header(with scroll y) for my inner table,
my inner row function

function format(d) {
    var str = '<div class="tabbable "><ul class="nav nav-tabs"><li class="active"><a href="#pane1" data-toggle="tab" ><span class="blueText">Details </span></a></li></ul><div class=" tab-content "><div id="pane1" class="tab-pane active tabBorder "><div class="row"><div class="col-md-7"> <table id="innerTable" class=" table table-condensed table-hover " ><thead ><tr><th class=" innerTableHeader">Host</th><th class=" innerTableHeader"># of Services</th><th class=" innerTableHeader" style="color:green;"><span >Ok</span></th><th class=" innerTableHeader" style="color:red;">Critical</th> <th class=" innerTableHeader" style="color:orange;"><span>Warning</span></th><th class=" innerTableHeader" style="color:rgb(102,0,102);">Unreachable</th><th class=" innerTableHeader">Status</th><th class=" innerTableHeader">Maintenence</th></tr> </thead><tbody  class="scrollContent">';
    var length = d['nodes'].length;
    console.log(length);
 
    for (var i = 0; i < length; i++) {
        var nodeReq = d['nodes'][i];
        var json = JSON.stringify(nodeReq);
        var x;
        str += '<tr>'+
            '<td class=" blueText">'+
                '<div>'+
                    '<a class="iframe-action" data-node-name="'+nodeReq['NODE_NAME']+'" href="#">' + nodeReq['NODE_NAME'] + '</a>'+
                '</div>'+
            '</td>'+
            '<td>' + nodeReq['PROCESS_COUNT'] + '</td>'+
            '<td style="color:green;">' + nodeReq['PROCESS_UP'] + '</td>'+
            '<td style="color:red;">' + nodeReq['PROCESS_DOWN'] + '</td>'+
            '<td>' + nodeReq['PROCESS_WARNING'] + '</td>'+
            '<td style="color:rgb(102,0,102);">' + nodeReq['PROCESS_UNREACHABLE'] + '</td>'+
            '<td>' + nodeReq['STATUS'] + '</td>'+
            '<td class=" blueText">'+
                '<a>Raise alert</a>'+
            </td>
        '</tr>';
    }
 
    var dataToFrame = d['nodes'][0]['CLUSTER_NAME'];
    str += '</tbody></table></div><iframe class="col-md-5 hov-graph" src="tabs_am.html?somedata=' + dataToFrame + '"frameBorder="0"></iframe></div></div></div></div>';
 
    return str;
}

3)how to have sorter(like the one it is there for datatable)for columns for my inner table.

looking forward for a reply,
srilakshmi.

allan · May 2014

If I understand correctly, do something like this: http://live.datatables.net/qufulig/1/edit

function initTable ( selector ) {
  if ( $.fn.dataTable.isDataTable( selector ) ) {
    $(selector).DataTable().destroy();
  }
  $(selector).DataTable( {
    paging: false
  } );
}

i.e. check if the table is a DataTable or not, and if so, destroy it, then create it. It is better to avoid destroying a table if you can though...

2)How to have fixed header(with scroll y) for my inner table, my inner row function

Are you initialising DataTables on that inner table? If so, just use the scrollY option. You must be doing it outside of the function given if you are though - after the fnOpen call, since that is when the node is created.

3)how to have sorter(like the one it is there for datatable)for columns for my inner table.

If you initialise DataTables on the inner table you will immediately gain this ability. I guess from this question you currently aren't!

So what to do is something like this, at the point where you are using fnOpen:

var row = table.fnOpen( ... );
$(row).find('table').dataTable( {
  sScrollY: 200
} );

Regards,
Allan

Srilakshmi · May 2014

Thanks Allan ,will try it out..

Srilakshmi · May 2014

Hi Allan,
How to use the opening and closing row , onclick highlight...,etc , the properties which i used below when i refill the table with different values,
i tried $('selector tbody') for $('#example tbody').on('click', 'td.details-control', function ()..... but it does not work
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).parents('tr');
var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Close any currently open rows
        table.rows().eq( 0 ).each( function ( idx ) {
          if ( table.row( idx ).child.isShown() ) {
            table.row( idx ).child.hide();
            $( table.row( idx ).node() ).removeClass('shown');
          }
        } );

        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

$('#example.table-striped123').on( 'click', '>tbody>tr', function () {
if ( table.row( this ).length === 0 ) {
return;
}
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );

$('#innerTable.innerTable').on( 'click', '>tbody>tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}

Srilakshmi · May 2014

my inittable function
function initTable ( selector ,Data) {
var MasterProducts = Data;
if ( $.fn.dataTable.isDataTable( selector ) ) {
$(selector).DataTable().destroy();
}
var table = $(selector).DataTable( {
"sPaginationType": "full_numbers",
"sDom": '<"top">rt<"bottom"ilp><"clear">',
"sScrollY": "440px",

    "aaData" : MasterProducts,

    "aoColumns" : [{
                    mData : "NODE_NAME"
                }, {

                   mData : "PROCESS_STATUS"
                },
                {
                    mData : "PROCESS_COUNT"
                },{
                   mData : "STATUS_STR"
                },{
                    mData : "HOST_MAINTENANCE"
                },null],
    columnDefs: [ {
  className:      'details-control',
  orderable:      false,
  data:           null,
  defaultContent: '',


  targets:        -1
},
{
    targets: 0,
    render: function ( data, type, row ) {
      return type === 'display' ?
        '<a id="firstColumn" title="'+data+'">'+data+'</a>' :
        data;
    }

    },


],
orderCellsTop: true,  

} );

}
waiting for a reply

Srilakshmi · May 2014

Hi allan its working thanks :)

allan · May 2014

Great to hear :-)

Allan

Srilakshmi · May 2014

Hi Allan, can u show the http://live.datatables.net/qufulig/1/edit example with inner row functionality...., looking forward for a reply..

Srilakshmi · May 2014

In the example http://live.datatables.net/qufulig/1/edit , if a different page instead of datatable (in the same div of datatables) has to loaded on clicking a button what sholud be done...,
looking forward for a reply,

Thanking you,
Srilakshmi

Srilakshmi · May 2014

waiting for a reply :)

Srilakshmi · May 2014

waiting for a reply :)

allan · May 2014

Update to the destroy example showing it with the ability to show hidden child rows: http://live.datatables.net/qufulig/2/edit .

if a different page instead of datatable (in the same div of datatables) has to loaded on clicking a button what sholud be done...

I dont understand the question I'm afraid. What different page?

Allan

doubt regarding inner row

doubt regarding inner row

Answers

Howdy, Stranger!

Categories

DataTables

doubt regarding inner row

doubt regarding inner row

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables