Simple example to bind a click event on each row of the DataTable with the help of rowCallback.
Please click on a row
You clicked on: {{ message }}
Please click on a row
You clicked on: {{ message }}
angular.module('datatablesSampleApp').
controller('rowClickEventCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
$scope.message = '';
$scope.someClickHandler = function(info) {
$scope.message = info.id + ' - ' + info.firstName;
};
$scope.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withPaginationType('full_numbers')
.withOption('rowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87)
$('td', nRow).unbind('click');
$('td', nRow).bind('click', function() {
$scope.$apply(function() {
$scope.someClickHandler(aData);
});
});
return nRow;
});
$scope.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
});