How to make each cell in the table clickable?

How to make each cell in the table clickable?

arielariel Posts: 2Questions: 0Answers: 0
edited June 2010 in General
Hi everyone,
I am currently using Datatables to display data from a database using sql, php, and json with implementation similar to the example.. i do however would like to further make each data (each cell , not on each row only) to be clickable and be directed to another datatable. Is this supported natively by Datatables? If not, I hope anyone can provide some hint or code snippet for me to achieve this. Thanks.

Thanks for this wonderful plugin.. i've been using it a lot in my reports making them available for viewing for my boss and colleagues in our internal network.

/ariel

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    You just need to add a click handler to the TD elements (as you normally would) - and that click handler will load data into the other DataTable.

    Events pre-init: http://datatables.net/examples/advanced_init/events_pre_init.html
    Event post-init: http://datatables.net/examples/advanced_init/events_post_init.html

    Allan
  • arielariel Posts: 2Questions: 0Answers: 0
    Hi allan,
    thank you for the quick response.. i was able to modify the 'post init' example by alerting the value of the clicked cell. i just put below code just right before the instatation of the datatable (and removing the code that highlights the rows coz i don't need it).

    $('#example tbody td').click( function () {
    /* Get the position of the current data from the node */
    var aPos = oTable.fnGetPosition( this );
    /* Get the data array for this row */
    var aData = oTable.fnGetData( aPos[0] );
    /* Update the data array and return the value */
    alert(aData[ aPos[1] ]);
    //this.innerHTML = 'clicked';
    } );


    It worked fine.. but when I put the exact same code on my working datatable, it doesn't seem to recognize the click event. my table id is also "example" so I don't know why it doesn't work. The source of my table is json via ajax.

    I will try to look for more of your tips in your forums but of course, if you can show me an example snippet to achieve this, it'd be great. An example that alerts the value of the clicked cell will be fine but just for you to know, my end objective is to really get the value of the clicked cell (or values of that entire row) to direct the browser to a URL where the values are the GET parameters.

    Thanks again,
    ariel
This discussion has been closed.