Jquery onclick event with angular datatable

Question

I need to open a new link whenever the datatable column is clicked. Here is my datatable code that retrieves data through an ajax call -

<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>

Here is my jQuery code I tried -

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

Css file reads

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

when clicked, chrome gives the error "ReferenceError: table not defined". Does anyone know how to do this?

Answer 1

Since you are using dataTables angular directives, you should define dtInstanceand work on it instead:

$scope.dtInstance = {}

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

Then use jQuery event handler dtInstanceas a table reference

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