带有 Angular 数据表的 Jquery onclick 事件

Question

每当单击数据表的列时，我都必须打开一个新链接。这是我的数据表代码，它通过 ajax 调用获取数据-

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="featuretable row-border compact hover" >
   <thead >
      <!--change style of column with css-->
      <tr>
         <th class="Header">Feature</th>
         <th class="Header">ID</th>
         <th class="Header">Log</th>
         <th class="Header">Location</th>
      </tr>
   </thead>
</table>

这是我正在尝试的 Jquery 代码 -

$('.featuretable tbody').on('click', 'tr', function () {
    console.log(table.row(this).data());
    var data = table.row(this).data();
    alert('You clicked on ' + data[1] + '\'s row');
});

CSS 文件读取 -

.Header {
    border-bottom: 2px solid #6f7277;
    padding: 3px 15px;
    text-align: left;
    color: #4b4a4a;
    overflow: hidden;
}

table.featuretable {
    table-layout: fixed;
    width: 100%;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: 20px;
    margin-bottom: 20px;
    border-collapse: collapse;
    border-spacing: 0;
}

table.featuretable td,
th {
    border: 1px solid transparent;
    height: 30px;
    transition: all 0.3s;
    overflow: hidden;
}

table.featuretable th {
    font-weight: bold;
    text-align: center;
    vertical-align: :middle;
}

table.featuretable td {
    text-align: center;
    vertical-align: :middle;
}

table.featuretable tr:nth-child(even) td {
    background: #f3f7fb;
}

table.featuretable tr:nth-child(odd) td {
    background: #ffffff;
}

点击时，chrome 给出错误“ReferenceError:表未定义”。有人知道怎么做吗 ？

Answer 1

由于您使用的是 Angular dataTables 指令，因此您应该定义一个 dtInstance 并对其进行处理:

$scope.dtInstance = {}

<table datatable="" dt-instance="dtInstance" dt-options="dtOptions" dt-columns="dtColumns" class="featuretable row-border compact hover" >

然后在 jQuery 事件处理程序中，使用 dtInstance 作为表引用

$('.featuretable tbody').on('click', 'tr', function () {
   var data = $scope.dtInstance.DataTable.row( this ).data();
   alert( 'You clicked on '+data[1]+'\'s row' );
} );