Child row does not have the same behavior with a row

tnthieu

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hello,

It seems the child rows are consider as html code in side a parent row. they are not consider as a real row in datatable. Therefore some functions that are applicable for a row but cannot for a child row. Is it correct?
What should I do to make child row considered as a real rows?
Can I make a real row as child row?
for example,
row A
row A1
row A2
row B
with A1, A2 are real row but I will add padding left to make it indent.
But the problem is when user sort by a criteria, for ex. date, the order will change
row A
row A1
row B
row A2.
Can I make A1, A2 always under A even user sort by any criteria?

Thanks

allan

It seems the child rows are consider as html code in side a parent row. they are not consider as a real row in datatable. Therefore some functions that are applicable for a row but cannot for a child row. Is it correct?

Spot on. The child row is attached to the parent row, that way, regardless of sorting of filtering it will always appear after the parent row.

What should I do to make child row considered as a real rows?

Make it a real row - not a chlid row (row.add()).

Can I make A1, A2 always under A even user sort by any criteria?

Sure - you just need to make sure the data in the table will always sort it that way. The orderFixed option can help force specific ordering. Most likely you'll want to have a hidden column - e.g.:

1  |  1
1  |  2
1  |  3
2  |  1
2  |  2

Allan

tnthieu

Thank you @allan .
Another question please.
With the normal row I can do like this
var row = $("#jobs-table").DataTable().row($(element).closest("tr"));
var job = row.data();
but with child row the row.data() return null instead of data of the row.
Do you have a solution to get data of a child row?

Thank you

tnthieu

Thank you @allan .
Another question please.
With the normal row I can do like this

$('.btn-edit-job').unbind('click').bind('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var fwfmId = $(this).attr('data-id');
           
            var firstCellOfRow = $(this).closest('tr').find('td:first');

            self.editJob(fwfmId, jobId, jeopardyTypeId, firstCellOfRow, techId, bundleGroupId);
        });

and in editJob function I can do like this

var row = $("#jobs-table").DataTable().row($(element).closest("tr"));
var job = row.data();

but with child row the $("#jobs-table").DataTable().row($(firstCellOfRow).closest("tr")) return Array(0) as in attached.
And row.data() return null.

Do you have a solution to get row and data of a child row?

Thank you

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin