ng-click event binding not working inside angular-datatables

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>

Welcome to StackOverFlow. The place where we take your code and try to help.... BUT you must provide code and information to your problem. Show us what you have tried! — Sari Rahal, Apr 01 '16 at 19:06

Bettimms · Accepted Answer · 2016-04-18T08:52:52.613

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>

Ravindra Vairagi · Answer 2 · 2018-01-16T09:15:13.707

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

}

ng-click event binding not working inside angular-datatables

2 Answers2