带角度数据表的Jquery onclick事件

时间:2016-08-22 10:25:45

标签: jquery angularjs datatables

每当单击一列数据表时,我都必须打开一个新链接。这是我的数据表代码,它通过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 Code -

$('.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就是错误&#34; ReferenceError:表未定义&#34; 。有人知道怎么做吗 ?

1 个答案:

答案 0 :(得分:0)

由于您使用的是angular dataTables指令,因此您应该定义$scope.dtInstance = {} 并对其进行处理:

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

然后在您的jQuery事件处理程序中,使用$('.featuretable tbody').on('click', 'tr', function () { var data = $scope.dtInstance.DataTable.row( this ).data(); alert( 'You clicked on '+data[1]+'\'s row' ); } ); 作为表引用

$http