How to parse an HTMLTableRowElement Object?

dogcatgoat

Hi,
Hopefully many people on this list can answer this.
This is a continuation of my question at:

http://datatables.net/forums/comments.php?DiscussionID=4563&page=1#Item_8

I was trying to use:

[code]
var aaa = vTable.fnFindCellRowNodes( mystring ); /* Search all columns */

// and parse the row:
var nTds=$('td', aaa);

// then list elements of the row by:
$(nTds[11]).text);
[/code]

but I am not getting anything that makes sense. Does anyone know how to examine the values of a HTML TableRowElement Object?
Thanks!

allan

Other than the syntax error - that looks fine. It might be worth adding a little debug (a few console.log statements) to check that aaa and nTds are what would would expect (after changing line 7 to $(nTds[11]).text();

Allan

dogcatgoat

Hi Allan,
Thank you again! .text is a syntax error and THANK YOU for the tip for using console.log!
I have a problem related to my original question-- fnFindCellRowNodes only returns the nodes from the visible table. Is there a way to get a list of all the nodes, from the hidden columns too so I can add them to the JSON object?
Thanks!

- Dan

allan

I think you want another plug-in for that... :-) http://datatables.net/plug-ins/api#fnGetTd is the function this time. Give it your TR element and it will give you an array of all TD nodes, regardless of visibility.

Allan

dogcatgoat

Dear Allan,
This is still very problematic.
What I am trying to do is read relevant values of only checked rows which can be changed by the user and submit them. There are about 30 rows, row 2 has the a checkbox to include or not include them in the submit.
One of the major problems I am having is that the row I am checking does not correlate to the row that is being submitted-- there seems to be 2 ways that rows are indexed, one how the table is displayed and another how it is constructed. I have seen discussions of this on the forums, but can you please add more to the FAQ since it will be greatly appreciated by newbs like myself?
Onto my debugging problem, which has vexed me for about a week. I think from what you are saying I could take the following approach:

[code]
// is this the correct selector to traverse only checked rows of my table in question?
$('input:checked', vTable.fnGetNodes()).each(function(i){

// here I try to read the key of the i'th row (in this case, the first column, a key)
// but it does not correlate to the checked row, it picks a "random" row instead.
JSONobject[w].key= $(vTable.fnGetTd($('#viewpoint_stanza_table tbody tr:eq('+i+') ')[0], 0)).html();
[/code]

Is there some way of correlating the variable i with the actual row it should be looking at?
I would greatly appreciate your help with this.
Thank you.

dogcatgoat

Dear Allan,

I think I solved my problem :). I ended up doing a check afterwards in the body.

The following code works.

Thank you for your help!


[code]
$(vTable.fnGetNodes()).each(function(i){
// first check to see if the checkbox is selected...
var mychecked= $('input:checked', vTable.fnGetTd($('#v_table tbody tr:eq('+i+') ')[0], 2)).attr('checked');

if (mychecked==true){
// add to JSON object here....
}

[/code]

dogcatgoat

Hi Alan,
There is another bug-- I think this time in the fnGetTd() API.
When I ask for a value of a hidden td that is at the far end of the table, fnGetTd() returns "...." as its value. Hidden tds on the left side of the table (columns 1-9?) read fine.
Can you please confirm this bug?
Thanks,
- Dan

allan

If you want hidden TD elements, you can use the plug-in: http://datatables.net/plug-ins/api#fnGetHiddenNodes .

Allan

dogcatgoat

Hi Allan,
Still this does not work. fnGetHiddenNodes() only returns the nodes that are present during table creation, not after I have updated the table values with javascript after the page is already loaded (for example, the user clicks an option and the table values get updated).
Do you have any other suggestions for submitting only table row values that have one of their columns checked, with some other columns hidden, and values that can change after the page is loaded?
Thank you.

allan

Let's go back to fnGetTd as i think there was an issue there - and fnGetNodes will simply get all TR elements - so this should get all checkboxes in the third column of the table (regardless of visibility). Note that the change I've made is to use 'this' rather than a jQuery selector which will work with only visible elements.
[code]
$(vTable.fnGetNodes()).each(function(i){
// first check to see if the checkbox is selected...
var mychecked= $('input:checked', vTable.fnGetTd(this, 2)).attr('checked');

if (mychecked==true){
// add to JSON object here....
}
[/code]
Allan

dogcatgoat

Hi Allan,
Thanks again for your reply,
The problem I am having is how to construct the JSON object-- basically how to read the table row values hidden and visible:

[code]
$(vTable.fnGetNodes()).each(function(i){
// first check to see if the checkbox is selected...
var mychecked= $('input:checked', vTable.fnGetTd(this, 2)).attr('checked');

if (mychecked==true){
// add to JSON object here.... I have no idea how to process both hidden and visible nodes

// this only processes visible nodes
$('td', this).each(function(){
console.log("td: " + $(this).text());
});

// not sure how to use fnGetHiddenNodes on "this". Can you please provide an example?
}
[/code]

Thanks again for your help.

allan

What about this:
[code]
$(vTable.fnGetHiddenNodes()).each(function(i){
// first check to see if the checkbox is selected...
var mychecked= $('input:checked', vTable.fnGetTd(this, 2)).attr('checked');

if (mychecked==true){
// add to JSON object here.... I have no idea how to process both hidden and visible nodes

// this only processes visible nodes
this
$('td', this).each(function(){
console.log("td: " + $(this).text());
});
}
[/code]
I suppose it is possible that won't work since vTable.fnGetHiddenNodes() gives an array - and I'm not sure if jQuery will provide a 'this' variable for that. If it does - great. If not, then use use two for loops rather than $().each.

Allan

dogcatgoat

Hi Allan,
Hmm, now for some reason when I do:

[code]
$(vTable.fnGetHiddenNodes())
[/code]

I am getting null (vTable is not null). Is there another way to reference vTable with fnGetHiddenNodes so that it will not return null? There are hidden columns in this table, when I look at vTable in the debugger, it contains them (but also stale data-- data that was used in the creation of the table, not its current values).

for fnGetHiddenNodes, I reference a file I created:



in it, I copied the fnGetHiddenNodes API.

Thanks again...

allan

If you do

[code]
alert( vTable.fnGetHiddenNodes().length );
[/code]
what do you get? Is vTable.fnGetHiddenNodes() returning null or is it something else?

Allan

dogcatgoat

Dear Allan,
It is returning 0. I am using version 1.7.5 of Datatables.

kind regards

allan

I'm afraid I think I'm taking us around in circles here - sorry. Try this:

[code]

$(vTable.fnGetNodes()).each(function(i){
// first check to see if the checkbox is selected...
var mychecked= $('input:checked', vTable.fnGetTd(this, 2)).attr('checked');

if (mychecked==true){
// add to JSON object here.... I have no idea how to process both hidden and visible nodes

// this only processes visible nodes\
var aRow = vTable.fnGetTds( this );
$(aRow).each(function(){
console.log("td: " + $(this).text());
});
}
[/code]
Note that this uses the fnGetTds plug-in function for DataTables.

Allan

dogcatgoat

Hey Allan,
Thanks. I am now using fnGetTds(), but it is only processing visible nodes (which is what your comment says?). Is it possible to construct my JSON object with data from the hidden columns also?
If not, do you suggest that I store extra information that I need to post in javascript variables, instead of keeping them in the table? The key to the row is hidden (column 0 in this table, the checkmark is column 2), so I am not sure how I can take it away from the table and store elsewhere as a javascript variable and correlate it back to the table.
Thanks again.. hope that there is another trick you have for this...

allan

The comment in the code above is just a left over from your own comment - I just didn't delete it. I had expected that to work okay. fnGetTds ( http://datatables.net/plug-ins/api#fnGetTds ) says it should pick up the hidden nodes, and looking at the code, I would be inclined to say that it should. I will try it myself this evening but I'm surprised that didn't work. You are hiding the columns using bVisible in your initialisation?

Allan

dogcatgoat

Hi Allan,
Yes, I am using the bVisible initialization flag to hide my columns. It will be great to know if the plug-in API works for you.

allan

Yup works absolutely fine for me. I tried the following:

[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );

var anTds = oTable.fnGetTds( $('#example tbody tr:eq(1)')[0] );
console.log( anTds.length );
} );
[/code]
and the length given was 5 - which is expected as the HTML table has 5 columns. Looking at anTds it contains the 5 TD cells I would expect. Adding your 'each' loop and I get the text from the five columns as well. So there is something funny going on somewhere with your code and some extra debug will be needed.

Try only this:

[code]
$(vTable.fnGetNodes()).each(function(i){
var aRow = vTable.fnGetTds( this );
console.log("length: " + aRow.length);
$(aRow).each(function(){
console.log("td: " + $(this).text());
});
} );
[/code]
And see if that works.

Allan

dogcatgoat

Dear Allan,
I am initializing my datatable differently to hide the columns. I am following the example:

http://www.datatables.net/examples/basic_init/hidden_columns.html

where I am setting aoColumns -- should I be using aoColumnDefs instead? Since I have 29 columns, perhaps aoColumnDefs will be more efficient since I only need to assign the columns that are hidden in its definition, instead of using null with aoColumns?

I tried your suggested code with the fnGetTds, and for some reason, it reports all the columns, but one hidden column's value in the middle of the table is null (it should be a long string) while the first hidden column shows its value correctly (a number key).
Should I try aoColumnDefs instead?
Thanks,

allan

aoColumns and aoColumnDefs are explained here: http://datatables.net/usage/columns . There is no difference in what they can do - it's just a different API. aoColumnDefs can be useful when you've got lots of columns instead of listing nulls like you suggest.

I'm pleased that my code works - it means I'm not going insane :-). However, there still sounds like an issue. Can you post your HTML table (just a single row) and your initialisation code please?

Allan

dogcatgoat

Hi Allan,
Thanks for the correlation between aoColumns and aoColumnsDef.
It is not easy to show you all my code since the table is initially populated with JSP.
I have run this a few times by changing my initial values of my tables (making some columns hidden, others visible,etc) and what is strange is that I always get when I return fnGetTds is what I initially placed into the table with JSP commands.
If I/user change the values dynamically through fnUpdate() (say the user presses a button to update the table contents), I am unable to see these new values.
So, in short, I think fnGetTds does get all my columns, but only their initial values-- not what has been updated on the page (in this case, most initial values are null, and they are populated with javascript/fnUpdate. Is this the typical behavior?
Thanks again :)

dogcatgoat

Hi Allan,
So I looked at this again and it looks like fnUpdate() updates the visible columns in my table, but not the hidden columns. Is there a function that can update hidden elements in the datatable?
Thanks :) :) :)

allan

There is code to handle hidden columns in fnUpdate - it should work just fine. How are you calling fnUpdate? Are you giving it an array or a column specific integer? If the latter, are you taking account of the fact that the int is the column index including hidden columns?

Allan

dogcatgoat

Hi Allan,
I was calling fnUpdate with a column specific integer. I believe my index is good since when I unhide all the columns (just initialize it differently) they update. Do you have any other suggestions? I will test more now...

Thanks

ps. I would like to style the heck out of my table (different colors, some columns smaller than others, etc.) can you recommend a good resource/forum/help page for this?

allan

I've just taken a look at fnUpdate and it does look okay as far as I can tell (indeed it passes the unit tests). Can you perhaps post the relevant code so I can take a look?

Regarding the styling - best place to look is with Firebug and the styling pages: http://datatables.net/styling/

Allan

dogcatgoat

Hi Allan,
I keep testing with the code snippet you provided, but I cannot get $(this).text() to display the updated value for a hidden column after I call fnUpdate(). One hidden column, for example, initially starts with a string, but $(this).text() returns only the initial string I gave it. If I start the column out as visible, I can see its contents get updated and $(this).text() returns its correct new value.
Thanks for pointing out your extensive styling section!

[code]
$(vTable.fnGetNodes()).each(function(i){
var aRow = vTable.fnGetTds( this );
console.log("length: " + aRow.length);
$(aRow).each(function(){
console.log("td: " + $(this).text());
});
} );
[/code]

allan

I'm at a little bit of a loss. With the following table:

[code]



Rendering engine
Browser
Platform(s)
Engine version
CSS grade




Trident
Internet Explorer 4.0
Win 95+
4
X



[/code]
and the following code:

[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );

oTable.fnUpdate('hello', 0, 2);

$(oTable.fnGetNodes()).each(function(i){
var aRow = oTable.fnGetTds( this );
console.log("length: " + aRow.length);
$(aRow).each(function(){
console.log("td: " + $(this).text());
});
} );
} );
[/code]
The output I get is:

[code]
length: 5
td: Trident
td: Internet Explorer 4.0
td: hello
td: 4
td: X
[/code]
Which is exactly what you would expect. Could you confirm that this works for you please.

Allan

dogcatgoat

Hi Allan,
Thanks for the test code. Unfortunately I do not get the same result. The value of the hidden column does not get updated. When I remove the column from the aoColumnDefs, it becomes visible and the values update. It seems like there is something not working with my fnUpdate() command on hidden columns. Could there be something wrong with my installation? Thanks again.

dogcatgoat

Hey Allan,
I found a solution-- I updated my datatables source from 1.7.5 to your nightly build and fnUpdate works now on hidden columns!
Thanks for hanging in there for me :).