Using child rows to keep 2 rows together when sorting

jtourvieille

I would like to create a DataTable and populate it in the following way:
row 1a
row 1b
row 2a
row 2b
row 3a
row 3b

When sorting by a column, I want to have the pair <row Xa, row Xb> to stay together.
For example:
row 2a
row 2b
row 1a
row 1b
row 3a
row 3b

It seems that adding row Xb's as a child row could be a solution, where the child row is always shown (I don't want to have a + button to expand this second row).

The problem is that I am getting an error.

var rowNode = theDataTable.row.add([ a1, a2, a3]).draw().node();
var rowIndex = theDataTable.row(rowNode).index();
var theData = theDataTable.row(rowIndex ).data(); // This is just to test that I can have access to the row with index rowIndex.

theDataTable.row(rowIndex).child([ b1, b2, b3]); // I am getting "r is null"

1. is child row the solution for what I am trying to achieve?
2. What is wrong with the way I am calling .child()?

Thanks,
Jessica

allan

Hi Jessica,

I don't immediately see anything wrong with that. I'd need a test case showing the issue to be able to understand what is going wrong please.

And yes, this is probably the best way to make sure rows stay together.

Thanks,
Allan

jtourvieille

I have made progress. The table looks the way I want.

What I need now is to write callbacks when clicking on the parent row or the child row.

$(document).on('click', '.parentRow', function() {
doSomethingWith(this);
});
$(document).on('click', '.childRow', function() {
doSomethingWith(this);
});

The parentRow looks like that:
<tr id="id1" class="parentClass" specialUniqueId="special1">...</tr>
The childRow looks like that:
<tr id="id2" class="childClass" specialUniqueId="special1">...</tr>

In the doSomethingWith() function, I want to be able to retrieve the specialUniqueId and it must work in both types of row (parent or child).

I tried your example:
var tr = $(this).parents('tr');
var theRow = myDataTable.row(tr);
var result = $(theRow).prop('specialUniqueId');

My result remains undefined. Something is wrong with those 3 lines.

Thanks,
Jessica

jtourvieille

Another question.
When the child row is created, how to add classes and properties to the child row <tr>?

allan

How are you reading the data for the table? Is it Ajax sourced, or being read from the DOM? If it is being read from the DOM you would need to have the child row's data (or rather the data destined for the child row) in the parent row (i.e. just one row for each record). DataTables cannot read child data from the DOM.

When the child row is created, how to add classes and properties to the child row <tr>?

When you create the child row, you define the HTML to be shown inside it, so you would add the classes, etc, to whatever you are using to create the child row.

Can you show me the full code please?

Allan

jtourvieille

First of all: initialization of the table with fake data.

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

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

    if ($(rowNode1).hasClass('even')) // odd and even issue: we need to have all the parents row with class odd
    {
        $(rowNode1).removeClass('even');
        $(rowNode1).addClass('odd');
    }

    $(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');

    if ($(rowNode3).hasClass('even'))
    {
        $(rowNode3).removeClass('even');
        $(rowNode3).addClass('odd');
    }

    $(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">' // as you suggested because there is no way to access the child row thorugh the DOM
        + '<td>ffffffff</td>'
        + '<td>qqqqqqqqqqqq</td>'
        + '</tr>'
        )).show();

    this.testTable.draw();

Then the callback functions for a click:

$(document).on('click', '.parentRow', function() {
    // How to retrieve the uniqueId property from the <tr>?
    //alert("retrieve the uniqueId property from the <tr>");

});

$(document).on('click', '.childRow', function() {
    // How retrieve the uniqueId property from the <tr> of the child row
    //alert("retrieve the uniqueId property from the <tr> of the child row");
});

My problem is that I don't know how I can retrieve relevant information in the callback functions. If you show me how to retrieve the uniqueId property from the parent and child <tr> (I have the feeling that for the child it will not be possible at all), I think I can move on.

Final question: I would like to have a table that looks like that:
row1 class="parentRow odd"
row2 class="childRow even"
row3 class="parentRow odd"
row4 class="childRow even"
so that the row background colors alternate nicely (I always have 1 row in the child row).
But I don't know why row3 never gets its class updated from 'even' to 'odd'.

Thanks,
Jessica

jtourvieille

Now I know how to get the uniqueId for the parentRow:

$(document).on('click', '.parentRow', function() {
    var tr = $(this).closest('tr');
    var uniqueId = $(tr).prop('uniqueId');
    if ($(tr).hasClass('row_selected'))
    {
        $(tr).removeClass('row_selected');
    }
    else
    {
        $(tr).addClass('row_selected');
    }
});

I fixed also the childRow callback function but I still can't get the uniqueId.

$(document).on('click', '.childRow', function() {
    // retrieve the uniqueId property from the <tr> of the child row
    var uniqueId = $(this).prop('uniqueId');
    alert(uniqueId);
    if ($(this).hasClass('row_selected'))
    {
        $(this).removeClass('row_selected');
    }
    else
    {
        $(this).addClass('row_selected');
    }
});

Indeed when I run under the debugger, I see no property of name "uniqueId" for the <tr> of any child row. And later on, I would like to be able to check for the class 'row_selected' as shown on the code, but I am worried that this will not work...

allan

Indeed when I run under the debugger, I see no property of name "uniqueId" for the <tr> of any child row.

That's because it is being set as a property rather than an attribute. DOM properties are only really useful in Javascript, while the attributes can be seen in the HTML.

The code above to get the uniqueId for the parent row looks good. The child row code actually looks good as well - although since it is an attribute, you should probably use .attr(). If that doesn't work, if you give me a link to a page showing the issue I can take a look.

Allan