How to Highlight and got to selected row?
How to Highlight and got to selected row?
Thorbadin
Posts: 3Questions: 0Answers: 0
Hi,
I would like to say WOW! What a wonderfull APP you build here!
He're is what I'm trying to do:
In my table I put a column (hide on loading) with html details in it (another table with specific content for each row). Inside the html content I put a hyperlink who get the user to another webpage to be able to view the complete detail and to be able to edit it if necesary. Here's my probleme. I want to put in this web page a Back link button to be able to the user to get back where he was before he click the link. So I need to put some parameter in the url like: www.mypage?userpage=3&rowID=4&sort=columnID2. And idealy, when the user will get back the row pass to the user will be highlight.
I search trough all the forum and I didnt find anything near this exemple. It is possible?
Thx in advance!
Here's my test code:
script :
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += ''+aData[6]+'';
sOut += '';
return sOut;
}
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example>tbody>tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bVisible": false, "aTargets": [ 6 ] }
],
"aaSorting": [[1, 'asc']]
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/working/DataTables-1.8.2/DataTables-1.8.2/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "/working/DataTables-1.8.2/DataTables-1.8.2/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
[/code]
html:
[code]
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Detail Content
Trident
Internet
Explorer 4.0
Win 95+
4
X
[/code]
... Same as all the exemple
} );
I would like to say WOW! What a wonderfull APP you build here!
He're is what I'm trying to do:
In my table I put a column (hide on loading) with html details in it (another table with specific content for each row). Inside the html content I put a hyperlink who get the user to another webpage to be able to view the complete detail and to be able to edit it if necesary. Here's my probleme. I want to put in this web page a Back link button to be able to the user to get back where he was before he click the link. So I need to put some parameter in the url like: www.mypage?userpage=3&rowID=4&sort=columnID2. And idealy, when the user will get back the row pass to the user will be highlight.
I search trough all the forum and I didnt find anything near this exemple. It is possible?
Thx in advance!
Here's my test code:
script :
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += ''+aData[6]+'';
sOut += '';
return sOut;
}
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example>tbody>tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bVisible": false, "aTargets": [ 6 ] }
],
"aaSorting": [[1, 'asc']]
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "/working/DataTables-1.8.2/DataTables-1.8.2/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "/working/DataTables-1.8.2/DataTables-1.8.2/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
[/code]
html:
[code]
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Detail Content
Trident
Internet
Explorer 4.0
Win 95+
4
X
[/code]
... Same as all the exemple
} );
This discussion has been closed.