带有角度数据表的Jquery onclick事件答案

【问题标题】：Jquery onclick event with angular datatable带有角度数据表的Jquery onclick事件
【发布时间】：2016-08-22 10:25:45
【问题描述】：

每当单击数据表的列时，我都必须打开一个新链接。这是我的数据表代码，它通过 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: table is not defined" 。有人知道怎么做吗？

【问题讨论】：

你能给我更多关于你正在使用的table类的信息吗？我不熟悉它。
我已经添加了css代码。
我的错。我说的是您尝试在console.log( table.row( this ).data() ); 使用的js table 类。它是数据表的一部分吗？还是你之前定义的？
不。那是我错的部分。在 jquery 中，我们通常定义 (#table).datatable，然后它可以工作，但在 Angular 中，我们所要做的就是在 table 标记中说 datatable。简而言之，不，我还没有定义表类。 Table.row 应该只是一个 jquery 函数。
查看您的代码，您正在引用“表”。这是在哪里定义的？我们可能需要查看更多您的 JS 代码，或者制作一个 jsbin/plunkr。

标签： jquery angularjs datatables

【解决方案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' );
} );

【讨论】：