title: How to show a dialog on icon click event inside a cell in Datatable?
body: <p>In My datatable custom directive, I have three action icons in a cell.</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
    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 '&lt;a href="#/Attachments/' + full.id + '"&gt;' + data + ' &lt;/a&gt;';
        }
      }, {
        "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 '&lt;div class = "center"&gt;
          &lt;span&gt;
            &lt;i class = "glyphicon-info-sign glyphicon" 
            id="info" style="color:#32a5e8" 
            onmouseover="this.style.color=\'crimson\'" 
            onmouseout="this.style.color=\'#32a5e8\'"&gt;
              &lt;/i&gt;
            &lt;/span&gt;      
            &lt;i class = "glyphicon-edit glyphicon" style="color:#32a5e8"
            onmouseover="this.style.color=\'crimson\'"  
            onmouseout="this.style.color=\'#32a5e8\'" ng-click=""&gt;
              &lt;/i&gt;      
            &lt;span&gt;
              &lt;i class = "glyphicon-remove glyphicon" style="color:#32a5e8"
              onmouseover="this.style.color=\'crimson\'" 
              onmouseout="this.style.color=\'#32a5e8\'" ng-click=""&gt;
                &lt;/i&gt;
              &lt;/span&gt;
              &lt;/div&gt;';
        }
      }]
    });
  
    $("#elem tbody tr td:eq(4)").on('click', function () {
      var data = oTable.fnGetData(this);
      console.log("clicked inside table -- data: ", oTable.fnGetData());
  
      var position = oTable.fnGetPosition(this);
      console.log("clicked position inside table -- position: ", position);
  
    });
  });
  </code></pre>
  
  <p>After clicking on "info" icon, I need to show a message in popover.<br/>
  Now,I have tried with <code>fnGetPosition()</code> 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.<br/>
  How can I work with it now? Or is there another way to do this?</p>