Getting values from hidden column rows

Getting values from hidden column rows

dmitrysdmitrys Posts: 4Questions: 0Answers: 0
edited April 2009 in General
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

Replies

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    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
  • dmitrysdmitrys Posts: 4Questions: 0Answers: 0
    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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    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
  • dmitrysdmitrys Posts: 4Questions: 0Answers: 0
    I got it to work. Thanks a lot for your help.
  • djohdjoh Posts: 23Questions: 0Answers: 0
    dmitrys,

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

    Thanks !
  • dmitrysdmitrys Posts: 4Questions: 0Answers: 0
    edited April 2009
    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
  • kcoreykcorey Posts: 5Questions: 0Answers: 0
    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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    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
  • kcoreykcorey Posts: 5Questions: 0Answers: 0
    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.tea46obet.tea46 Posts: 6Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    You need to use fnGetNodes to get all TR nodes in a table:

    [code]
    $( oTable.fnGetNodes() ).each(function(){
    [/code]
    Allan
  • obet.tea46obet.tea46 Posts: 6Questions: 0Answers: 0
    edited March 2010
    wow... Allan, my problem's solved..

    Thanksss a lot..^_^

    Obet
  • whitewizardwhitewizard Posts: 12Questions: 0Answers: 0
    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
  • Deuce14Deuce14 Posts: 5Questions: 0Answers: 0
    edited May 2014

    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...

This discussion has been closed.