Child rows (show extra / detailed information)--Not able to show the child row in table

mohammed sameen

Hi,
I am using Datatables js for showing and hiding the row information for my table(which is created using Google web toolkit-gwt celltable).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 '

' + '' + '' + '' + '

Full name:

';
}

    $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.
<tbody><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><td class="GEUXRR0COC GEUXRR0CAD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-18">karmala</div></td><td class="GEUXRR0COC GEUXRR0CAD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-19">25</div></td><td class="GEUXRR0COC GEUXRR0CAD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-20">03040</div></td><td class="GEUXRR0COC GEUXRR0CAD GEUXRR0CLD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-21">Bowee Stree,new york</div></td></tr><tr __gwt_row="1" __gwt_subrow="0" class="GEUXRR0CPD"><td class="GEUXRR0COC GEUXRR0CAE GEUXRR0CBD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-16">xxx</div></td><td class="GEUXRR0COC GEUXRR0CAE"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-17">nnnn</div></td><td class="GEUXRR0COC GEUXRR0CAE"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-18">t</div></td><td class="GEUXRR0COC GEUXRR0CAE"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-19">26</div></td><td class="GEUXRR0COC GEUXRR0CAE"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-20">030150</div></td><td class="GEUXRR0COC GEUXRR0CAE GEUXRR0CLD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-21">kr Stree,KR Puram</div></td></tr><tr __gwt_row="2" __gwt_subrow="0" class="GEUXRR0CPC"><td class="GEUXRR0COC GEUXRR0CAD GEUXRR0CBD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-16">iiii</div></td><td class="GEUXRR0COC GEUXRR0CAD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-17">jjjjj</div></td><td class="GEUXRR0COC GEUXRR0CAD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-18">etta</div></td><td class="GEUXRR0COC GEUXRR0CAD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-19">29</div></td><td class="GEUXRR0COC GEUXRR0CAD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-20">030180</div></td><td class="GEUXRR0COC GEUXRR0CAD GEUXRR0CLD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-21">kr Stree,KR</div></td></tr><tr __gwt_row="3" __gwt_subrow="0" class="GEUXRR0CPD"><td class="GEUXRR0COC GEUXRR0CAE GEUXRR0CBD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-16">kkkk</div></td><td class="GEUXRR0COC GEUXRR0CAE"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-17">llll</div></td><td class="GEUXRR0COC GEUXRR0CAE"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-18">ahmed</div></td><td class="GEUXRR0COC GEUXRR0CAE"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-19">25</div></td><td class="GEUXRR0COC GEUXRR0CAE"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-20">030890</div></td><td class="GEUXRR0COC GEUXRR0CAE GEUXRR0CLD"><div style="outline-style:none;" __gwt_cell="cell-gwt-uid-21">Bowee Stree,jp nagar</div></td></tr></tbody>

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?

mohammed sameen

no support.....i did it by using plain javascript.

```$(function() {
var inc = 0;
jQuery('#btnId').click(function() {
inc++;
$("#example tbody tr").each(function(i, object) {
console.log("inc vlaue"+inc)
if(inc%2==0){
$('#example tbody .dispId').remove();
console.log("hide");
}else{
var safeHtml= "<tr class=\"dispId\"><td>Full name:'"+i+"'</td><td></td></tr>";
$wnd.$(object).after(safeHtml);
console.log("show");
}
});

    });
});```