How to get dataTable.rows(row-selector) return also the child rows?

jtourvieille

I have a DataTable with a child row for each regular row:
- parentRow
- childRow
- parentRow
- childRow
- etc,...

I am trying to find a row-selector that will return the parentRow and the childRow as well.

For example:
testTable = $("#testTableList").DataTable({
lengthChange : false,
paging : true,
deferRender : false,
searching : true,
ordering : true,
stateSave : false,
info : false,
autoWidth : false,
dom : '<lfr>t<"F"ip>',
columns : [ {
width : '50%'
}, {
width : '50%'
}],
order: []
});

    var rowNode1 = this.testTable.row.add(['zzzzzz','xxxxxx']).node();
    $(rowNode1).addClass('parentRow');
    $(rowNode1).prop('uniqueId', 'row1');

    var rowIndex1 = this.testTable.row(rowNode1).index();
    var rowNode2 = this.testTable.row(rowIndex1).child($(
        '<tr class="childRow even" uniqueId="row2" role="row">'
        + '<td>kkkkkkkkk</td>'
        + '<td>pppppppppp</td>'
        + '</tr>'
        )).show();

    var rowNode3 = this.testTable.row.add(['ggggggg','bbbbbbbbb']).node();
    $(rowNode3).addClass('parentRow');
    $(rowNode3).prop('uniqueId', 'row3');

    var rowIndex3 = this.testTable.row(rowNode3).index();
    var rowNode4 = this.testTable.row(rowIndex3).child($(
        '<tr class="childRow even" uniqueId="row4" role="row">'
        + '<td>ffffffff</td>'
        + '<td>qqqqqqqqqqqq</td>'
        + '</tr>'
        )).show();

    var rowNode5 = this.testTable.row.add(['ggggggg','bbbbbbbbb']).node();
    $(rowNode5).addClass('parentRow');
    $(rowNode5).prop('uniqueId', 'row5');

    var rowIndex5 = this.testTable.row(rowNode5).index();
    var rowNode6 = this.testTable.row(rowIndex5).child($(
        '<tr class="childRow even" uniqueId="row1" role="row">'
        + '<td>ffffffff</td>'
        + '<td>qqqqqqqqqqqq</td>'
        + '</tr>'
        )).show();

    var rowNode7 = this.testTable.row.add(['ggggggg','bbbbbbbbb']).node();
    $(rowNode7).addClass('parentRow');
    $(rowNode7).prop('uniqueId', 'row1');

    var rowIndex7 = this.testTable.row(rowNode7).index();
    var rowNode8 = this.testTable.row(rowIndex7).child($(
        '<tr class="childRow even" uniqueId="row8" role="row">'
        + '<td>ffffffff</td>'
        + '<td>qqqqqqqqqqqq</td>'
        + '</tr>'
        )).show();  

    this.testTable.draw();

// This callback function re-acts to a click.
// It does not do much but is there to show
// that I am not getting the expected number
// of rows.
// All the rows (parents and children) have an attribute call role and is set to "row".
$(document).on('click', '.parentRow', function() {
    var uniqueId = $(this).prop('uniqueId');
    var theNodes = testTable.rows('tr[role="row"]').nodes(); 
    var length =theNodes.length; // this returns only 4 while I am expecting 8
    alert(length);
});

I need to use childRow for my solution. How can I get rows(row-selector) return the child rows as well?

Thanks,
Jessica

allan

I am trying to find a row-selector that will return the parentRow and the childRow as well.

There isn't one I'm afraid. There is no selector to get the child rows at all. You'd need to select the parent rows and get the child rows from them.

Allan