Hidden row details + Nested Table problem.
Hidden row details + Nested Table problem.
kabayongtao
Posts: 3Questions: 0Answers: 0
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.
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.
This discussion has been closed.
Replies
[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]
[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