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: {{ showCase.message }}
Please click on a row
You clicked on: {{ showCase.message }}
angular.module('datatablesSampleApp', ['datatables']).controller('RowClickEventCtrl', RowClickEventCtrl);
function RowClickEventCtrl($scope, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.message = '';
vm.someClickHandler = someClickHandler;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json')
.withPaginationType('full_numbers')
.withOption('rowCallback', rowCallback);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
function someClickHandler(info) {
vm.message = info.id + ' - ' + info.firstName;
}
function rowCallback(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() {
vm.someClickHandler(aData);
});
});
return nRow;
}
}