Hidden row details + Nested Table problem.

kabayongtao

Good day everyone, I like DataTables for providing easy and advance way of styling tables.

But I'm fairly new with javascript and jquery so I encountered a problem while trying to implement Hidden row details and a nested table. Let me explain further

What I am trying to achieve is a expandable tabular data of profiles with user-comments in a form of a nested table. The problem is, the icon and it's functionality used to hide/show the main table is also passed through the nested table. The icon on the nested table can also be clicked but it will generate an error.

Other than that, the data of the nested table is displayed fine.

[code]


...


Always late
Lzy


[/code]

I've read and used the example (http://datatables.net/examples/api/row_details.html) as my template. I assume the cause lies on how the code insert the with clickable image:
[code]
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center topborder";

$('#table thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#table tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

[/code]

If someone can help, I will be truly grateful.

kabayongtao

I forgot to mention, I load the tabular data from a xml - here's my table structure:
[code]
<?php
function loadTable()
{
$list = new SimpleXMLElement('students.xml', null, true); // load SimpleXML
foreach($list as $course)
{
foreach($course as $student)
{
echo '';
echo ''.$student->profile->surname.'';
echo ''.$student->profile->firstname.'';
echo ''.$student->profile->mi.'';
echo ''.$course['name'].'';
echo ''.$student->profile->address.'';
echo ''.$student->profile->contactnum.'';
echo ''.$student->profile->email.'';
echo ''.$student->profile->picurl.'';
echo '';
foreach($student->comments->children() as $comment){
echo '';
echo ''.$comment['date'].'';
echo ''.$comment.'';
echo '';
}
echo '';
echo '';
}
}
}

?>



Surname
Given Name
MI
Course
Address
Contact Number
Email
Pic URL
Comments

<?php loadTable(); ?>

[/code]

kabayongtao

Oh, I got it:

[code]
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center topborder";

$('#table > thead > tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );

$('#table > tbody > tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
[/code]

Anyhow, thanks. :D

allan

Yup - nice one :-). The selectors before weren't selective enough :-)

Allan