How to get a details for a specific cell of a row in jquery datatables dynamically

Question

I have a problem in retrieving the details of a specific cell in the row of jquery datatables. What I am trying to do is for a specific cell of a row in Datatable I am trying to retrieve all the data specific to it and display it as the output

For example, All the country names are retrieved from the database and displayed in a particular column in the datatable. Now what I want is when I click the country name all the cities corresponding to it should be displayed. I hope it makes enough sense. I need to do dis dynamically without refreshing the page.

Here is a glimpse of the code :

$(document).ready(function() {
oTable = $('#datatables').dataTable( {
    alert("hi")
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "../getcities.php",
    "aData" : "POST","getcities.php?cname="+cname
    "aoColumns": [
        { "sClass": "center", "bSortable": false },
        null,
        { "sClass": "center" },
    ]
} );

$('#datatables tbody tr td').live( 'click', function () {
    alert("hi")
    var nTr = this.parentNode.parentNode;

    // I need to display the data here in a dialog box
} );
}

The above code may not be fully correct as I said I am still a novice in jquery datatables and Ajax And here is the html I am trying:

<div>                           
<table id = "datatables" class="display">
<thead>
    <tr>
        <th></th>
        <th>Country Name</th>
    </tr>
<thead>
<tbody>
    <?while($row=mysql_fetch_array($result)){
    <tr>                            
        <td class="center" id="cname" value="cname"><?= $row['cname']?></td>
    </tr>
    <?}}?>
</tbody>

Code in getcities.php:

// Here I am trying to store all the cities corresponding to the country name in an array and returning it
<?php
 country = $_POST['cname'];
 var arr = new Array();
 arr = mysql_fetch_array(mysql_query("SELECT cityname FROM dbtable WHERE cname = '.country.'"))

return arr; 
?>

As I am new to the Datatables I am not understanding how to make this happen. I am using PHP as the scripting language

Please help

Answer 1

Try the following code

$('#datatables tbody tr td img').live( 'click', function () {
    var iPos = oTable.fnGetPosition( this );
    if(iPos!=null){
        var aData = oTable.fnGetData( iPos );//get data of the clicked row
        var colData = aData[1];//get column data of the row
    }
} );

Also , take a look at this : How to select a row in Jquery datatable