如何在數據表的單元格內顯示有關圖標單擊事件的對話框？

Question

在我的數據表自定義指令中，我在一個單元格中有三個操作圖標。

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

  });
});

單擊“信息”圖標后，我需要在彈出窗口中顯示一條消息。
現在，我嘗試使用fnGetPosition()方法，該方法為單元格內的所有圖標返回相同的位置。 如果我可以區分它們的位置值，那么很容易在“信息”圖標單擊上顯示對話框。
我現在如何使用它？ 還是有其他方法可以做到這一點？

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 
        }
});