Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

ng-click / ngClick Directive Problem #343

Closed
rimantoro opened this issue Jun 15, 2015 · 2 comments
Closed

ng-click / ngClick Directive Problem #343

rimantoro opened this issue Jun 15, 2015 · 2 comments

Comments

@rimantoro
Copy link

Hi,

I'm using DT in an controller and use the server-side option to fetch the data. Data sucessfully fetched with paging, but when I create a delete button for rows, the ng-click failed to trigger the function attached into. Delete button should print a message into console when clicked.

I've already read this manual http://l-lin.github.io/angular-datatables/#/bindAngularDirective, but still not work. Strangely, there is no error or anything in browser console.

My version :

  • Angular 1.2.6
  • Chrome 43
  • Datatables 1.10.7
  • jQuery 2.1.4

Below is my codes

.controller('ClientListController', ['$scope', 'DTOptionsBuilder', 'DTColumnBuilder','SatuprodukApi', 'configSatuproduk', function($scope, DTOptionsBuilder, DTColumnBuilder, SatuprodukApi, configSatuproduk) {
    var vm = this;

    var apiGetUrl = SatuprodukApi.getUrl('/client/list/dtformat');
    var apiDelUrl = SatuprodukApi.getUrl('/client/delete');

    vm.delete = deleteRow;
    vm.message = '';
    vm.dtInstance = {};
    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
            url: apiGetUrl,
            beforeSend: function apiHeaderAuth(request) {
                request.setRequestHeader('Clientid', configSatuproduk.clientId);
                request.setRequestHeader('Pass', configSatuproduk.clientPass);
            },
            type: 'POST'
        })
    // or here
        .withDataProp('data')
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withPaginationType('full_numbers');
    vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('code').withTitle('Client Code'),
        DTColumnBuilder.newColumn('ips').withTitle('IP Whitelist'),
        DTColumnBuilder.newColumn('created_at').withTitle('Created'),
        DTColumnBuilder.newColumn('updated_at').withTitle('Updated'),
        DTColumnBuilder.newColumn('deleted_at').withTitle('Deleted').notVisible(),
        DTColumnBuilder.newColumn(null).withTitle('Edit').renderWith(function(value, type, full) { 
            return "<a class=\"btn btn-success\" href=\"#/client/edit/"+value+"\">Edit</a>";
        }).notSortable(),
        DTColumnBuilder.newColumn(null).withTitle('Delete').notSortable().renderWith(deleteHtml)
    ];

    function deleteRow(id) {
        console.log( "Delete client " + id);
    }

    function deleteHtml(data, type, full, meta) {
        return '<button class="btn btn-warning" ng-click="dtClient.delete('+full.id+')">Delete</button>';
    }
}])

HTML

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Client</h1>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="dataTable_wrapper" ng-controller="ClientListController as dtClient">
                    <p class="text-danger"><strong>{{ dtClient.message }}</strong></p>
                    <br>
                    <table datatable="" dt-options="dtClient.dtOptions" dt-columns="dtClient.dtColumns" dt-instance="dtClient.dtInstance" class="table table-striped table-bordered table-hover">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@l-lin
Copy link
Owner

l-lin commented Jun 15, 2015

At first glance, it seems you forgot the createdRow option.

@rimantoro
Copy link
Author

Ah, My bad.

This what its mean about "you can do it by recompiling your DataTable after its initialization is over" in the manual page.

Many thanks again.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants