Question

I am new to Jquery Datatables. I have managed to create a table and add some elements into it.
This is What I have got.

I want to trigger the mouse click events on the hyperlinks in my table and retrieve the data in the data table of certain row. Such as “blockid” of clicked hyperlink’s row. How can I do it?

Please advice. Thanks!

$(function () {
 $('#tbl_datablocks').dataTable( {
      "aoColumns": [
          { "sTitle": "blockid","sName": "blockid"},
          { "sTitle": "Name" },
          { "sTitle": "Created Time" },
          { "sTitle": "Updated Time", "sClass": "center" },
          { "sTitle": "Updated Time", "sClass": "center" }
          ]    } );


$('#tbl_datablocks').dataTable().fnAddData(["id1","data1","data2","data3","<a href='#' class='retrievedata' onclick='retrievedata(this)'>Read</a>"]);
$('#tbl_datablocks').dataTable().fnAddData(["id2","data1","data2","data3","<a href='#' class='retrievedata' onclick='retrievedata(this)'>Read</a>"]);
});   

function retrievedata(which)
{
    alert($(which).parents("tr"));
}
​

Answer 1

Have you considered using the data attributes? When creating your anchor <a>, add an attribute data-blockid with the correct value. When jQuery registers the click event, you can use $(this).data("blockid") to get the value.

Here’s an updated example