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

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:

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.

jqueryhtmlangularjsdatatablesangular-datatables


Solution 1:[1]

Swal has updated their library. function (isConfirm) is not supported any more. Read the docs

https://sweetalert.js.org/guides/

swal("Click on either the button or outside the modal.") .then((value) => { swal(The returned value is: ${value}); });

Solution 2:[2]

.withOption('responsive', {
            details: {
                renderer: function (api, rowIdx, columns) {
                    var data = $.map(columns, function (col, i) {
                        return col.hidden ?
                            '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                            '<td>' + col.title + ':' + '</td> ' +
                            '<td>' + col.data + '</td>' +
                            '</tr>' :
                            '';
                    }).join('');

                    var res = data ? $('<table/>').append(data) : false;
                    if (res)
                        $compile(angular.element(res).contents())($scope);
                    return res;
                },
                type: 'column',
                target: 0
            }
        })

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ramya Roy
Solution 2 mkrieger1

Related Questions