javascript - jQuery dataTables add multiple collapsible rows using the fnOpen() API function - Stack Overflow

admin管理员组

文章数量:1297115

I am using the jQuery dataTables plugin to build advanced tables for our application. One of the requirements is to have "collapsible" rows (not groups!): e.g. rows represent campaigns, and they might have child campaigns. The structure of child rows is (in basic case) the same as in the parent table - same cells, same data types.

But, the child rows shouldn't affect the parent table itself: I mean, the number of rows per page should remain the same, child rows shouldn't be sorted separately from the parent row, they should always remain binded. Therefore I can't use fnAddData() API func for that.

And the other tricky requirement is the possibility to have multi-level collapsible rows (e. g. child campaigns for child campaigns, etc.)

I was using the fnOpen() API function for that, it allows to "open" any row, appends a child block to it, and you can generally insert there whatever you want. It was working just fine in dataTables 1.8.2, i used code like this to generate child rows:

$(childRowData).each(function(){
    row = $(oTable.fnOpen(row.get(0), $(this), "child_row"));
    $(row).addClass('child_row');
});

Generally, it "opened" the current row (defined above), inserted data in the child row, then in the cycle "opened" the child row, added a child to it, etc.

But as of dataTables 1.9.0 looks like it is allowed only to "open" the parent rows, and only do it once.

Of course, I can create a sub-table, apply $.dataTable() to it and insert it to the child row, but it seems like a somewhat lame and expensive solution, especially when we might have 3-4 levels of depth.

Is there any other way to implement collapsible rows in dataTables?

I am using the jQuery dataTables plugin to build advanced tables for our application. One of the requirements is to have "collapsible" rows (not groups!): e.g. rows represent campaigns, and they might have child campaigns. The structure of child rows is (in basic case) the same as in the parent table - same cells, same data types.

But, the child rows shouldn't affect the parent table itself: I mean, the number of rows per page should remain the same, child rows shouldn't be sorted separately from the parent row, they should always remain binded. Therefore I can't use fnAddData() API func for that.

And the other tricky requirement is the possibility to have multi-level collapsible rows (e. g. child campaigns for child campaigns, etc.)

I was using the fnOpen() API function for that, it allows to "open" any row, appends a child block to it, and you can generally insert there whatever you want. It was working just fine in dataTables 1.8.2, i used code like this to generate child rows:

$(childRowData).each(function(){
    row = $(oTable.fnOpen(row.get(0), $(this), "child_row"));
    $(row).addClass('child_row');
});

Generally, it "opened" the current row (defined above), inserted data in the child row, then in the cycle "opened" the child row, added a child to it, etc.

But as of dataTables 1.9.0 looks like it is allowed only to "open" the parent rows, and only do it once.

Of course, I can create a sub-table, apply $.dataTable() to it and insert it to the child row, but it seems like a somewhat lame and expensive solution, especially when we might have 3-4 levels of depth.

Is there any other way to implement collapsible rows in dataTables?

• javascript
• jquery
• datatable
• datatables

Share Improve this question Follow edited Jun 7, 2012 at 12:19 Alexander Gilmanov asked Jun 7, 2012 at 10:57 Alexander GilmanovAlexander Gilmanov 38722 silver badges99 bronze badges 1

• So, looks like there's no way to do it without modifying dataTables code. We don't want to do this, so I had to go with the nested tables. – Alexander Gilmanov Commented Jun 8, 2012 at 13:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Datatables has been updated somehow and it's very straight forward now for adding children rows to parent rows: http://datatables/reference/api/row().child()

One of the thing not really obvious, is in case you want to use the same layouts for your children rows like for the parent rows, you need to use the jquery selector, for passing a node instead of a string (written in the documentation but I missed it the first time).

Doint that is correct:

.child(
    $(
        '<tr>'+
            '<td>'+rowIdx+'.1</td>'+
            '<td>'+rowIdx+'.2</td>'+
            '<td>'+rowIdx+'.3</td>'+
            '<td>'+rowIdx+'.4</td>'
        '</tr>'
    )
)

But doing that is wrong: (it will insert your "tr" into a "td" with a colspan of the size of your table and it will obviously break the columns alignment)

.child(
    '<tr>'+
        '<td>'+rowIdx+'.1</td>'+
        '<td>'+rowIdx+'.2</td>'+
        '<td>'+rowIdx+'.3</td>'+
        '<td>'+rowIdx+'.4</td>'
    '</tr>'
)

When you create the child row that has subchildren, you're probally best off rolling your own solution.. I was doing some stuff similar to this a few weeks ago with datatables and that was the best I could e up with.

本文标签： javascriptjQuery dataTables add multiple collapsible rows using the fnOpen() API functionStack Overflow