Getting values from hidden column rows

dmitrys

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

allan

Hi Dmitry,

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

dmitrys

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

allan

Hi 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

dmitrys

I got it to work. Thanks a lot for your help.

djoh

dmitrys,

Could you post your solution ?
Might be helpful not only to me, but also to others...

Thanks !

dmitrys

Here are some code snippets:

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

kcorey

Warning: extreme JS newbie here. It could be something incredibly obvious, or already covered in a FAQ somewhere in which case please give me a pointer to it.

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

allan

Hmm - it can be a bit annoying that...

$('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

kcorey

Thanks for the reply 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

obet.tea46

I want to get all data, including data (especially the 'id') in hidden rows by using the "alert".

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.

allan

You need to use fnGetNodes to get all TR nodes in a table:

[code]
$( oTable.fnGetNodes() ).each(function(){
[/code]
Allan

obet.tea46

wow... Allan, my problem's solved..

Thanksss a lot..^_^

Obet

whitewizard

Allan.. In my "oTable" have 5 columns, 11 rows and only first, third and last column contain textbox (). I want to get and set any textbox on oTable by specific row id and column id (no event). Please help me.
Sorry for my english

Aek

Deuce14

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"):

$(".link_class").on("click", function(e) {
     e.preventDefault();
     var row = $(this).parents("td")[0];
     var pos = oTable.fnGetPosition(row);
     var id = oTable.fnGetData(pos[0])["id"];
     alert(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...