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

Question

I have a problem with my angular js data table. This code works correctly but after adding responsive plugin during collapse my buttons are not working, meaning 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 collapse mode.

Answer 1

I created one solution 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.