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

The angular-datatables with responsive plugin ng-click not working after scaling #714

Closed
ArturPopi opened this issue May 2, 2016 · 2 comments

Comments

@ArturPopi
Copy link

Hi, everything works fine but when i scaled table, ng-click function is not working.
Full size:
res1

After resize:
res2

Here is the js code, angular controller:

`ctrls.controller('localListCtrl',function($rootScope,$scope,localServices,DTOptionsBuilder,DTColumnBuilder,oAuth,$compile){

$scope.dtInstance = {};

function callback(json) {
    console.log(json);
}

$scope.reloadData = function () {
    var resetPaging = false;
    $scope.dtInstance.reloadData(callback, resetPaging);
};

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
        url: $rootScope.assetsPathBase.api + '/local/list-ajax',
        type: 'POST',
        data: function (d) {
            d.user_id = oAuth.usr_id;
        }
    })
    .withDataProp('data')
    .withOption('serverSide', true)
    .withOption('processing', true)
    .withOption('responsive', true)
    .withOption('order', [[0,'asc'], [1,'asc'], [2,'asc']])
    .withOption('createdRow', function (row, data, dataIndex) {
        $compile(angular.element(row).contents())($scope);
    })
    .withPaginationType('full_numbers').withBootstrap().withLanguageSource('//cdn.datatables.net/plug-ins/1.10.10/i18n/Polish.json');

$scope.reload = function () {
    $scope.dtInstance.reloadData();
};

$scope.dtColumns = [
    DTColumnBuilder.newColumn('name').withTitle('Nazwa'),
    DTColumnBuilder.newColumn('meters').withTitle('Metraż'),
    DTColumnBuilder.newColumn('description').withTitle('Opis'),
    DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
            .renderWith(function (data) {
                return '<button type="button" ng-click="openModalLocal('+data.id+')" class="btn green-meadow" ><span class="glyphicon glyphicon-edit"></span> Edytuj</button>';
            })
];

});`

and html code

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="table table-hover" width="100%"></table>

@ArturPopi
Copy link
Author

i solve it, maybe it is not perfectly solution but i add class to column, then the column with buttons/actions is not hidden.

code:
$scope.dtColumns = [ DTColumnBuilder.newColumn('name').withTitle('Nazwa'), DTColumnBuilder.newColumn('meters').withTitle('Metraż'), DTColumnBuilder.newColumn('description').withTitle('Opis'), DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().withClass('all') .renderWith(function (data) { return '<button type="button" ng-click="openModalLocal('+data.id+')" class="btn green-meadow" ><span class="glyphicon glyphicon-edit"></span> Edytuj</button>'; }) ];

@l-lin
Copy link
Owner

l-lin commented May 2, 2016

See #305.

@l-lin l-lin closed this as completed May 2, 2016
@l-lin l-lin added the duplicate label May 2, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants