Row click event

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() ]; });