ng-click event binding not working inside angular-datatables - angularjs

Question

I am using angular-datatables for listing student information. I want to implement server-side ajax implementation for every search, sorting, paging etc rather than fetch all data and repeat the data using angularjs. sorting, searching, paging is working fine. But I am unable to bind ng-click event when click on specific row actions.
This is my view:
This is my javascript source code:
<div ng-app="myApp">
<div ng-controller="OrganizationController">
<table id="entry-grid" datatable="" dt-options="dtOptions"
dt-columns="dtColumns" class="table table-hover"></table>
</div>
</div>
<script>
var app = angular.module('myApp',['datatables']);
app.controller('OrganizationController', BindAngularDirectiveCtrl);
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.message = '';
vm.edit = edit;
vm.dtInstance = {};
vm.persons = {};
$scope.dtColumns = [
DTColumnBuilder.newColumn("organization_name").withOption('organization_name'),
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
.renderWith(actionsHtml)
]
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
dataSrc: "data",
url: "organizations",
type:"get"
})
.withOption('processing', true) //for show progress bar
.withOption('serverSide', true) // for server side processing
.withPaginationType('full_numbers') // for get full pagination options // first / last / prev / next and page numbers
.withDisplayLength(2) // Page size
.withOption('aaSorting',[0,'asc'])
function edit() {
console.log('hi')
}
function actionsHtml(data, type, full, meta) {
vm.persons[data.id] = data;
return '<button class="btn btn-warning" ng-click="edit()">' +
' <i class="fa fa-edit"></i>' +
'</button>';
}
}
</script>

Answer 1

You didn't add withOption("rowCallback",fn)
<script>
var app = angular.module('myApp',['datatables']);
app.controller('OrganizationController', BindAngularDirectiveCtrl);
function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.message = '';
vm.edit = edit;
vm.dtInstance = {};
vm.persons = {};
$scope.dtColumns = [
DTColumnBuilder.newColumn("organization_name").withOption('organization_name'),
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
.renderWith(actionsHtml)
]
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
dataSrc: "data",
url: "organizations",
type:"get"
})
.withOption('rowCallback', rowCallback)
.withOption('processing', true) //for show progress bar
.withOption('serverSide', true) // for server side processing
.withPaginationType('full_numbers') // for get full pagination options // first / last / prev / next and page numbers
.withDisplayLength(2) // Page size
.withOption('aaSorting',[0,'asc'])
function edit() {
console.log('hi')
}
function actionsHtml(data, type, full, meta) {
vm.persons[data.id] = data;
return '<button class="btn btn-warning" ng-click="edit()">' +
' <i class="fa fa-edit"></i>' +
'</button>';
}
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() {
alert("You've clicked row," + iDisplayIndex);
});
});
return nRow;
}
}
</script>

Answer 2

If we want to bind a click event to specific DOM element in angular datatable row find(jQuery)that element using any CSS selector. For example -
HTML
<table id='table' datatable [dtOptions]="dtOptions" class="table table-sm table-striped table-bordered" cellspacing="0" width="100%">
Angular(v4) Component-
export class ExampleComponent implements OnInit {
dtOptions: DataTables.Settings = {};
ngOnInit() {
//Starts Angular jQuery DataTable server side processing settings
let ajaxSettings: any = {
settings: {
ajax: {
...
},
serverSide: true,
searchDelay: 800,
deferRender: true,
processing: true,
autoWidth: false,
stateSave: false,
searching: true,
aoColumns: [
//Table column definition
{
//Action Column
sTitle: 'Action',
sWidth: "20%",
bSearchable: false,
bSortable: false,
mRender: (data, type, full) => {
return "<a href='javascript:void(0);' class='custombtn btn btn-sm btn-primary'><span class='fa fa-paper-plane-o'></span>Action Button</a>";
}
}
],
fnServerParams: function (data) {
},
initComplete: () => {
},
rowCallback: (row: Node, data: any[] | Object, index: number) => {
const self = this;
// Unbind first in order to avoid any duplicate handler
// (see https://github.com/l-lin/angular-datatables/issues/87)
var element = $('td', row).find('a.custombtn');
if (element) {
element.unbind('click');
element.bind('click', () => {
self.someClickHandler(data, index);
});
}
return row;
}
}
};
this.dtOptions = ajaxSettings.settings;
//Ends Angular jQuery DataTable server side processing settings
}
//Will be called on click of anchor tag which has the class "custombtn"
someClickHandler(info: any, index: number): void {
alert(JSON.stringify(info) + ' index =>' + index);
}
}