How to show a dialog on icon click event inside a cell in Datatable?

mohitsid

In my datatable custom directive, I have three action icons in a cell.
[code] var oTable = $(elem).dataTable({
'bJQueryUI':false,
'sScrollY': '300px',
'bScrollInfinite':true,
'bSearchable':true,
'bScrollCollapse':true,
'sDom': 'tSi',
"bDeferRender": true,
'bPaginate': true,
'aaSorting': [[1, 'asc']],
'aaData': scope.datasource,
"fnRowCallback" : processRow,
"aoColumnDefs": [
{"bSortable": true, "bSearchable": true, "sWidth":"20%", "sTitle" : "Name", "sName": "name", "aTargets": [ 0 ], "mData":"name",
"mRender": function ( data, type, full ) {
return ''+ data +' ';
}
},
{"bSortable": true, "bSearchable": true, "sWidth":"18%", "sTitle" : "Types", "sName": "types", "aTargets": [ 1 ], "mData":"types" },
{"bSortable": true, "bSearchable": true, "sWidth":"10%", "sTitle" : "File Type", "sName": "fileType", "aTargets": [ 2 ], "mData": "fileType" },
{"bSortable": true, "bSearchable": true, "sWidth":"18%", "sTitle" : "Modified Time", "sName": "modifiedTime", "aTargets": [ 3 ], "mData": "modifiedTime"},

{"bSortable": false, "bSearchable": true, "sWidth":"25%", "sTitle" : "Action Buttons", "aTargets": [ 4 ], "mData": "",
"mRender": function ( ) {
return ' ';
}
}
]
})[/code]
After clicking on "info" icon, I need to show a message in popover. How to do this?

mohitsid

I have embedded this code inside the ready( ) function and then tried with fnGetPosition( ) method which returns the same position for all the icons inside the cell. If I can differentiate their position values, it will be easy for me to show the dialog on "info" icon click.

[code]$(document).ready(function() {
..
var oTable = $(elem).dataTable({
..
});
$("#elem tbody tr td:eq(4)").on('click', function(){
var position = oTable.fnGetPosition(this);
console.log("clicked position inside table -- position: ",position);
});
});
[/code]
How can I work with it now? Or is there another way to do this?