Working with hidden rows
Working with hidden rows
Hello!
I am working with table data that has parent-child relationships. When I initialize the DataTable, I use this function to hide child rows and give the class "level" to each row (parent rows have the value 0 and child rows have the value of 1):
"fnCreatedRow": function (nRow, aData, iDataIndex) {
if (aData[1] != "") {
$('td', nRow).parent().css('display', 'none');
$('td', nRow).parent().attr('level', '1');
$('td', nRow).parent().css('background-color', 'white');
}
else {
$('td', nRow).parent().attr('level', '0');
$('td', nRow).parent().css('background-color', '#E2E4FF');
}
},
The number of child rows for each parent row varies.
I have a separate JavaScript function that shows/hides the child rows for each parent row when you click on a link in the parent row.
I have two problems with these hidden rows:
1) When searching, the information says, for example, "Showing 1 to 1 of 1 entries (filtered from 13 total entries)", but since that row is hidden, it is not displayed.
2) When I expand the child rows for a parent row, some of the child nodes need to be displayed on the next page, but are not visible on the next page.
I was hoping someone would have some suggestions as to how to address these problems. As for the first problem, I was thinking of something that would make all applicable rows visible, regardless of parent/child status (aka, if there is any text in the search box, all filtered rows are visible). And as for the second problem, I'm pretty much at a loss. I was wondering if the scroller would be the best option, but that also leaves a bunch of blank space at the bottom equal to the amount of space the invisible rows would take up.
Thank you!
I am working with table data that has parent-child relationships. When I initialize the DataTable, I use this function to hide child rows and give the class "level" to each row (parent rows have the value 0 and child rows have the value of 1):
"fnCreatedRow": function (nRow, aData, iDataIndex) {
if (aData[1] != "") {
$('td', nRow).parent().css('display', 'none');
$('td', nRow).parent().attr('level', '1');
$('td', nRow).parent().css('background-color', 'white');
}
else {
$('td', nRow).parent().attr('level', '0');
$('td', nRow).parent().css('background-color', '#E2E4FF');
}
},
The number of child rows for each parent row varies.
I have a separate JavaScript function that shows/hides the child rows for each parent row when you click on a link in the parent row.
I have two problems with these hidden rows:
1) When searching, the information says, for example, "Showing 1 to 1 of 1 entries (filtered from 13 total entries)", but since that row is hidden, it is not displayed.
2) When I expand the child rows for a parent row, some of the child nodes need to be displayed on the next page, but are not visible on the next page.
I was hoping someone would have some suggestions as to how to address these problems. As for the first problem, I was thinking of something that would make all applicable rows visible, regardless of parent/child status (aka, if there is any text in the search box, all filtered rows are visible). And as for the second problem, I'm pretty much at a loss. I was wondering if the scroller would be the best option, but that also leaves a bunch of blank space at the bottom equal to the amount of space the invisible rows would take up.
Thank you!
This discussion has been closed.
Replies
$('.dataTables_filter input').keyup(function () {
if ($('.dataTables_filter input').val() != '') {
$('#tableOne tr').css('display', 'table-row');
}
else {
$('#tableOne tr').css('display', function () {
if ($(this).attr('level') == '1') {
return 'none';
}
});
}
});
Keep in mind that you should add
if ($('.dataTables_filter input').val() != '') {
$('#tableOne tr').css('display', 'table-row');
}
else {
$('#tableOne tr').css('display', function () {
if ($(this).attr('level') == '1') {
return 'none';
}
});
}
to the fnDrawCallback function so that when you go to the next page, the rows there are either shown or hidden (as desired by your search string).
Also, as it stands now, I do no think that this solution will necessarily be compatible with a solution to the second problem, as it basically reverts to the orginial display properties.
Initializing the dataTable:
[code]
"fnDrawCallback": function (oSettings, oData) {
if ($('.dataTables_filter input').val() != '') {
$('#tableOne tr').css('display', 'table-row');
}
else {
$('#tableOne tr').css('display', function () {
return $(this).attr('expand');
});
}
},
"fnCreatedRow": function (nRow, aData, iDataIndex) {
if (aData[1] != "") {
$('td', nRow).parent().addClass('child');
$('td', nRow).parent().css('display', 'none');
$('td', nRow).parent().attr('expand', 'none');
$('td', nRow).parent().attr('date', aData[0]);
$('td', nRow).parent().css('background-color', 'white');
}
else {
$('td', nRow).parent().addClass('parent');
$('td', nRow).parent().attr('expand', 'table-row');
$('td', nRow).parent().attr('date', aData[0]);
$('td', nRow).parent().css('background-color', '#E2E4FF');
}
},
[/code]
Here, I give my parent rows the class 'parent' and my child rows the class 'child'.
The purpose of the 'expand' attribute is to give the value of the display setting should be for the row on each draw. This helps with maintaining the display value when changing pages and searching.
The 'date' attribute is used to bind the parent rows with their child rows, in a sense. This is used in the click function later so that clicking on a parent row only affects its child rows (in this example, only affects those rows with the same date in the first column).
In the same scope as oTable, I used these two functions to handle searching and toggling the parent rows:
[code]
$('.dataTables_filter input').keyup(function () {
if ($('.dataTables_filter input').val() != '') {
$('#tableOne tr').css('display', 'table-row');
}
else {
oTable.$('tr').css('display', function () {
return $(this).attr('expand');
});
}
});
$('#tableOne tr.parent').click(function () {
var date = $(this).attr('date');
oTable.$('tr.child').css('display', function () {
var date1 = $(this).attr('date');
if (date == date1) {
if ($(this).css('display') == 'table-row') {
$(this).attr('expand', 'none');
return 'none';
}
else if ($(this).css('display') == 'none') {
$(this).attr('expand', 'table-row');
return 'table-row';
}
else {
$(this).attr('expand', 'none');
return 'none';
}
}
});
});
[/code]