programmatically select and scroll to a row by id
programmatically select and scroll to a row by id
hi all,
I have a tricky question. I have 2 datatables with a 1:N relationship. In my case the top one contains mixtures and the bottom one displays the items in the selected mixture in the top table.
On a second page this relationship is reversed, meaning the top table contains all the items and the bottom one the mixtures the selected item appears in.
What I would like to achieve is that in both cases if the users clicks on a row in the bottom table (this can be a simple link in one of the table cells) he gets redirected to the reversed relationship were in the top table the previously clicked item is selected and visible (= the table isscrolled to the correct position).
Example:
In the top table "Coke" is selected. Coke contains Caffeine. If the user now clicks on caffeine in the bottom table, the relationship should be reversed (redirect to different page) and in the top table caffeine will be selected an the bottom table then displays "Coke, Coffee, Red Bull,..."
If the users now clicks on Coke we should be back at square 1.
I would start with:
- making "Caffeine" a link to the reversed view with a GET parameter
-extract that parameter in Javascript
What I don't know how to do:
- Find the row in the table containing the id/GET parameter (=alphanumeric from database; bVisible: false)
- scroll to the correct position
Top table should preferably use scroller but it would also work without.
I have a tricky question. I have 2 datatables with a 1:N relationship. In my case the top one contains mixtures and the bottom one displays the items in the selected mixture in the top table.
On a second page this relationship is reversed, meaning the top table contains all the items and the bottom one the mixtures the selected item appears in.
What I would like to achieve is that in both cases if the users clicks on a row in the bottom table (this can be a simple link in one of the table cells) he gets redirected to the reversed relationship were in the top table the previously clicked item is selected and visible (= the table isscrolled to the correct position).
Example:
In the top table "Coke" is selected. Coke contains Caffeine. If the user now clicks on caffeine in the bottom table, the relationship should be reversed (redirect to different page) and in the top table caffeine will be selected an the bottom table then displays "Coke, Coffee, Red Bull,..."
If the users now clicks on Coke we should be back at square 1.
I would start with:
- making "Caffeine" a link to the reversed view with a GET parameter
-extract that parameter in Javascript
What I don't know how to do:
- Find the row in the table containing the id/GET parameter (=alphanumeric from database; bVisible: false)
- scroll to the correct position
Top table should preferably use scroller but it would also work without.
This discussion has been closed.
Replies
Scroller must be enabled and hence row height must be the same for all rows. Sadly this is not given in my case for one side of the relationship.
You also need the fnFindCellRowIndexes and fnReloadAjax from the plug-ins API.
Here is what i did:
1 column in the Details table is a link with a url Parameter to the reversed view.
Extract url parameters in JavaScript:
[code]
var urlParams = {};
(function () {
var e,
a = /\+/g, // Regex for replacing addition symbol with a space
r = /([^&=]+)=?([^&]*)/g,
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
q = window.location.search.substring(1);
while (e = r.exec(q))
urlParams[d(e[1])] = d(e[2]);
})();
[/code]
Use url parameter to determine detail data to load and to scroll and select the correct row in the master table:
[code]
$(document).ready(function() {
masterTable = $('#masterTable').dataTable({
"sAjaxSource": "getDataJSON.php",
"sDom": "frtiS",
"bDeferRender": true,
"bProcessing": true,
"iDisplayLength": -1,
"aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
"aaSorting": [[ 0, "asc" ]],
"sScrollY": "160",
"aoColumns": [
/* id */ {"sWidth": "150px"},
/* Name */ null
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if (urlParams.hasOwnProperty("id")){
if ( aData[0] == urlParams["id"] )
{
$(nRow).addClass('row_selected');
}
return nRow;
}
return nRow;
},
"fnInitComplete": function() {
if (urlParams.hasOwnProperty("id")){
var idParam = urlParams["id"];
/* Seach only column 0 = id */
var rowIndexes = masterTable.fnFindCellRowIndexes(idParam, 0 );
var rowIndex = rowIndexes[0];
masterTable.oScroller.fnScrollToRow( rowIndex );
detailTable.fnReloadAjax('samplesJSON.php?id=' + idParam);
}
}
});
// Table empty on page load if no url paramter of id is available
detailTable = $('#detail').dataTable( {
"iDisplayLength": -1,
"aLengthMenu": [[10, 20, 40, -1], [10, 20, 40, "All"]],
"aaSorting": [[ 1, "desc" ]],
"sScrollY": "310",
"aoColumns": [
/* Ename */ null,
/* Perc */ {"sWidth": "100px"},
/* Source */ {"sWidth": "100px"}
]
});
// This here is needed for the Master-Detail functionality
// eg. click on master row displays details in details table
/*
* Called when clicking on a row in the masterTable.
* 1. change the CSS Styles of selected Row (and the row previosuly selected)
* 2. Get an array of selected rows (in this case always 1)
* 3. Get the data of the selected row
* 4. Get Code value (is in column 1 -> array posiiton 0)
* 5. (Re-)load components Table using id.
*
*/
$("#componentsTable tbody").click(function(event) {
/*1.*/ $(componentsTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
/*2.*/ var anSelected = fnGetSelected(componentsTable);
/*3.*/ var aData = componentsTable.fnGetData(anSelected[0]);
/*4.*/ var id = aData[0];
/*5.*/ detailTable.fnReloadAjax('samplesJSON.php?id=' + id);
});
});
/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i