current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote -2 down vote favorite

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 view

This is my javascript source code: 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>
share|improve this question
    
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 1 at 19:06
up vote 1 down vote accepted

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.