Angular Js Datatable : In Responsive Plugin ng-click not working during scalling (collapse) mode

Issue

I am Having a Problem with my angular js data table. this code works correctly but after adding responsive plugin during collapse my buttons are not working means that ng-click is not working Here is my code

This is HTML table code :

<table datatable="ng" dt-options="table.dtOpt_tresh" dt-column-defs="table.dtColDefs_tresh" class="row-border hover table-responsive display nowrap" width="100%" cellspacing="0">
<thead>
    <tr>
        <th class="thbg"></th>
        <th class="thbg">{{'crm.CRMSR'|translate}}</th>
        <th class="thbg wd-wide">{{'crm.CRMNAME'|translate}}</th>
        <th class="thbg">{{'crm.CRMTYPE'|translate}}</th>
        <th class="thbg">{{'crm.CRMCONTACT'|translate}}</th>
        <th class="thbg">{{'crm.CRMSALES'|translate}}</th>
        <th class="thbg">{{'crm.CRMPURCHASE'|translate}}</th>
        <th class="thbg">{{'crm.CRMACTION'|translate}}</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th class="thbg"></th>
        <th class="thbg">{{'crm.CRMSR'|translate}}</th>
        <th class="thbg wd-wide">{{'crm.CRMNAME'|translate}}</th>
        <th class="thbg">{{'crm.CRMTYPE'|translate}}</th>
        <th class="thbg">{{'crm.CRMCONTACT'|translate}}</th>
        <th class="thbg">{{'crm.CRMSALES'|translate}}</th>
        <th class="thbg">{{'crm.CRMPURCHASE'|translate}}</th>
        <th class="thbg">{{'crm.CRMACTION'|translate}}</th>
    </tr>
</tfoot>
<tbody>
    <tr ng-repeat="list in table.trace_data">
        <td></td>
        <td>{{$index + 1}}</td>
        <td>{{ list.prefix + ' ' + list.firstname + ' ' + list.lastname}}</td>
        <td class="min-wd-120">{{ list.type}}</td>
        <td class="min-wd-150">{{ list.contact}}</td>
        <td>{{ list.sales}}</td>
        <td>{{ list.purchase}}</td>
        <td>
            <button class="btn btn-labeled btn-info btn-xs" type="button" ng-click="table.Restore(list.id);"  uib-tooltip="{{'crm.TOOLTIPMSG.RESTOREMSG'|translate}}" uib-tooltip-trigger="focus" uib-tooltip-placement="top">
                <span class="btn-label"><i class="fa fa-exclamation"></i>
                </span>{{'product.RESTORE'|translate}}</button>
        </td>

    </tr>

</tbody>

This is my controller.js code :

vm.dtOpt_tresh = DTOptionsBuilder.newOptions()
                .withOption('responsive', true) 
        vm.dtOpt_tresh.withPaginationType('full_numbers');
        vm.dtOpt_tresh.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    values: vm.dtColumnTypes
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }]
        });



        vm.dtColDefs_tresh = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5),
            DTColumnDefBuilder.newColumnDef(6).notSortable()
        ];

This is Restore button function

 vm.Restore = function (id) {
            SweetAlert.swal({
                title: 'Are you sure?',
                text: 'Your Data Will be Restore in to Your Main CRM Data!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#27c24c',
                confirmButtonText: 'Yes, Restore it!',
                cancelButtonColor: '#f05050',
                cancelButtonText: 'No, cancel pls!',
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {
                    SweetAlert.swal('Restored!', 'Your Data has been Restored.', 'success');
                    $scope.table.tracebacktoCrmEntry(id);
                } else {
                    SweetAlert.swal('Cancelled', 'Your Data is Not Restored Now :)', 'error');
                }
            });
        }

And This is output :

in this image, my restore button is not working. (I'm not able to perform my click event in this button in collpse mode) and thanks in advanced

Solution

Some How i created one solution i m using .withClass('all') to that Restore Button column so that column not going in to the collapse mode and another columns are going to collapse mode so this button now easily clickable!

 vm.dtColDefs_tresh = [
            DTColumnDefBuilder.newColumnDef(0).withClass('all'), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5),
            DTColumnDefBuilder.newColumnDef(6), DTColumnDefBuilder.newColumnDef(7).notSortable().withClass('all')
        ];

This .withClass('all') is default class provided by datatables plugin.

Hope this will help to some one !!

Answered By - Urvashi Bhatt