Injecting JSNI(Datatables.net) to GWT CellTable to hide/show rows

[Mohammed Sameen]

I am using Datatables js(using JSNI) for showing and hiding the row information for my table(which is created using Google web toolkit-gwt celltable) link(https://www.datatables.net/examples/api/row_details.html).My requirement is on click of Button i need to iterate the table and show /hide the information but its not working See below is my code

function format(d) {
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'
                    + '<tr>'
                    + '<td>Full name:</td>'

                    + '</tr>' + '</table>';}



$wnd.$(function() {

            var table = $wnd.$('#example').DataTable({
                "columns" : [ {

                    "orderable" : false,
                    "data" : null,
                    "defaultContent" : ''
                }, {
                    "data" : "firstName"
                }, {
                    "data" : "middleName"
                }, {
                    "data" : "lastName"
                }, {
                    "data" : "age"
                }, {
                    "data" : "empId"
                }, {
                    "data" : "address"
                } ],
                "order" : [ [ 1, 'asc' ] ]
            });

            $wnd.jQuery('#btnId').click(function() {



                $wnd.$("#example tbody tr").each(function(i) {                  
                    var rowNo = table.row(i);

                    if (rowNo.child.isShown()) {
                        // This row is already open - close it
                        console.log("hide-->");
                        rowNo.child.hide();
                    } else {
                        console.log(rowNo.data());
                          rowNo.child( format(rowNo.data()) ).show();
                    }
                });
            });
        });

and finally i saw one difference is that the table which is created using GWT generates the table structure in this format. <tr __gwt_row="0" __gwt_subrow="0" class="GEUXRR0CPC"><td class="GEUXRR0COC GEUXRR0CAD GEUXRR0CBD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-16" tabindex="0">xxx</div></td><td class="GEUXRR0COC GEUXRR0CAD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-17">yyy</div></td>
since text will be there inside div which is inside td.How to solve this issue?How to show/hide the row inside the table?any help?
or Any other way to develop this feature using GWT(https://www.datatables.net/examples/api/row_details.html)?

[Mohammed Sameen]

Finally i did it by injecting plain javascript into gwt celltable..

private static native void loadDataJS_main(GWTExpandCollapse gwt)/*-{

$wnd.$(function() {

var inc = 0;

$wnd.jQuery('#btnId').click(function() {

 inc++;

 $wnd.$("#example tbody tr").each(function(i, object) { 

console.log("inc vlaue"+inc)

  if(inc%2==0){

  $wnd.$('#example tbody .dispId').remove();

  console.log("hide");

  }else{

  var safeHtml= gwt.@com.my.sample.client.gwt.GWTExpandCollapse::getRowValue(I)(i);

 $wnd.$(object).after(safeHtml);

 console.log("show");

  }

});

});

});

}-*/;