Getting values from hidden column rows
Getting values from hidden column rows
Is there a way to get the inner HTML from a element in a hidden column?
Basically I have a table that redirects the user to a different page when a table row in the body is clicked. The row value in the ID column is used as a query string parameter. I would like not to display that column to the user but still be able to access its values.
Thank you,
Dmitry
Basically I have a table that redirects the user to a different page when a table row in the body is clicked. The row value in the ID column is used as a query string parameter. I would like not to display that column to the user but still be able to access its values.
Thank you,
Dmitry
This discussion has been closed.
Replies
Yes indeed, there certainly is a way of doing this. What you need to do is make use of two API functions:
fnGetPosition() - http://datatables.net/api#fnGetPosition
fnGetData() - http://datatables.net/api#fnGetData
What to do is pass your TD element (probably 'this' in the event handler context) to fnGetPosition() and use the return value (it's an array, use the zero index for the row) to pass to fnGetData(). That will return an array with the full original data for that row. :-)
Hope this helps,
Allan
That's very helpful but I have one more question. I am using an AJAX driven data table and have to define the onclick event inside the "fnDrawCallback" function. How can I call fnGet.. methods inside the "fnDrawCallback" function?
Thanks a lot,
Dmitry
Since you are using Ajax it's quite easy. Just assign the result of the DataTables intialisation to a variable, and that variable will be available inside the callback functions. Take a peak at the example code for http://datatables.net/api#fnGetData (and a number of my other examples) - it's not a direct match, but hopefully you'll see how this can be done.
If you are interested, the reason this is easy with Ajax is due to it's asych nature. The Ajax call allows DataTables to complete it's initalisation, thus oTable (or whatever you pick for the variable) is available. fnDrawCallback() is then called when the Ajax request returns. However, in DOM only interaction, fnDrawCallback() is called before the DataTables initialiser has completed (it's called as a part of the initialiser), and thus oTable isn't available. :-)
Regards,
Allan
Could you post your solution ?
Might be helpful not only to me, but also to others...
Thanks !
var searchTable = $("#searchGrid").dataTable({
....
"aoColumns": [
{ "bVisible": false } // the first column is invisible
...
],
...
"fnDrawCallback": function() {
...
$("#searchGrid tbody tr").click(function() {
var position = searchTable.fnGetPosition(this); // getting the clicked row position
var contactId = searchTable.fnGetData(position)[0]; // getting the value of the first (invisible) column
document.location.href = "../Customer/View/" + contactId;
});
}
...
}); // end of the .dataTable method
I understand putting the reference to 'searchTable' in the click function, but it's not quite what I'm looking for.
I'd like this functionality in the fnRowCallback that's defined for the table during the creation of the table. Unfortunately, that is slightly recursive. I have a table initializer that looks like this:
[code]
var oTable;
$(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#data tbody td').editable( 'uup_ajax.html', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
/* Init DataTables */
oTable = $('#data').dataTable( {
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bJQueryUI": true,
"bAutoWidth": true,
"aoColumns": [
/* id */ { "bSearchable": false,
"bVisible": true},
/* keyword */ null,
/* url */ null,
/* datetime */ null
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).attr("id",$('td:eq(0)', nRow).html());
$('td:eq(0)', nRow).attr("id","id");
$('td:eq(1)', nRow).attr("id","keyword");
$('td:eq(2)', nRow).attr("id","url");
$('td:eq(3)', nRow).attr("id","datecreated");
return nRow;
}
} );
} );
[/code]
In a perfect world, the bVisible above would be 'false', and the first line of the fnRowCallback would be whatever incantation is required to return the link for this row, and get the ID for the row from the first element (that's hopefully hidden). However, if I put the 'oTable' into the fnRowCallback definition, it all breaks because oTable isn't defined yet.
Any suggestions how to break the circle and get this defined?
-Ken
$('td:eq(0)', nRow).html() should be the same as aData[0] . And this will work when the first column is hidden as well. Another option would be to use fnSetColumnVis ( http://datatables.net/api#fnSetColumnVis ) once the initialisation is complete to hide the column
Would that fix it?
Allan
Yes, putting the aData[0] in the RowCallback did the trick up to when I'm trying to report the information back up to the server using jeditable.
I'm working on something else just at the minute, but as soon as I can I'll get back to this and see what I can see.
Cheers!
-Ken
this my code:
[code]
function show(){
$('#example tr').each(function(){
if(!this.rowIndex) return;
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
aData[ aPos[1] ] = this.cells[0].innerHTML; // just get first column
alert(aData[ aPos[1] ]); // show the id
});
}
.
.
.
[/code]
but when i hit the button, the data showing that only visible in the table, while not showing hidden data
please help..
sorry for my english, i use the google translator.
[code]
$( oTable.fnGetNodes() ).each(function(){
[/code]
Allan
Thanksss a lot..^_^
Obet
Sorry for my english
Aek
FYI for those like myself who use named columns - you need to refer to them as such. For example, to get the value of a hidden column's cell (in this case, "id"):
Only posting this as it took me a couple of hours to figure out what was wrong, so hopefully will save someone else the time...