如何在数据表的单元格内显示有关图标单击事件的对话框？

Question

In My datatable custom directive, I have three action icons in a cell.

$(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 '<a href="#/Attachments/' + full.id + '">' + data + ' </a>';
      }
    }, {
      "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 '<div class = "center">
        <span>
          <i class = "glyphicon-info-sign glyphicon" 
          id="info" style="color:#32a5e8" 
          onmouseover="this.style.color=\'crimson\'" 
          onmouseout="this.style.color=\'#32a5e8\'">
            </i>
          </span>      
          <i class = "glyphicon-edit glyphicon" style="color:#32a5e8"
          onmouseover="this.style.color=\'crimson\'"  
          onmouseout="this.style.color=\'#32a5e8\'" ng-click="">
            </i>      
          <span>
            <i class = "glyphicon-remove glyphicon" style="color:#32a5e8"
            onmouseover="this.style.color=\'crimson\'" 
            onmouseout="this.style.color=\'#32a5e8\'" ng-click="">
              </i>
            </span>
            </div>';
      }
    }]
  });

  $("#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);

  });
});

After clicking on "info" icon, I need to show a message in popover.
Now,I have 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.
How can I work with it now? Or is there another way to do this?

Answer 1

$(document).ready(function() {
         var oTable = $("#elem").dataTable({
         'bJQueryUI':false,
         'sScrollY': '300px',
         'bScrollInfinite':true,
           ..........
           ..........
});
$("#elem tbody").delegate("tr i", "click", function (e) {
        e.preventDefault();
        var self = $(this);
        var pos = self.closest('tr').index();// <-- this will give you row index.

        if (self.hasClass('glyphicon-edit')) {
                    // Do something
        }else if (self.hasClass('glyphicon-info-sign')){
                    // Do something
        }else if(self.hasClass('glyphicon-remove'){
                     // Do something 
        }
});