CODEWITHSUNDEEP
javascriptangularjspaginationangular-uiangular-ui-grid
Mendes
Mendes

Reputation: 18541

Angular-ui-grid pagination controls not being shown

I´m using the following controller and HTML configuration to have a paginated ui-grid:

   app.controller('AdminProspectGridCtrl', function ($scope, $http, uiGridConstants) {
    
        $scope.gridOptions = {
          data: 'myData',
          paginationPageSizes: [25, 50, 100, 500],
          paginationPageSize: 25,
          enablePagination: true,
          enablePaginationControls: true,
          enableFiltering: true,
          enableColumnResizing: true,
          enableGridMenu: true,
          columnDefs: [
            { field: 'company'},
            { field: 'email'},
            { field: 'country'},
            { field: 'companySize'},
            { field: 'phone' },
            { field: 'dateCreated', cellFilter: 'date:"medium"' },
          ]
        };
    
        // Retrieve server data
        $http.get('/api/admin/test').then(function (response) {
                $scope.myData = response.data;
            }, 
            function (error) {
                console.log(error);  
        });
  });

The HTML code:

<link rel="stylesheet" href="/bower_components/angular-ui-grid/ui-grid.css" />
<script src="/bower_components/angular-ui-grid/ui-grid.js"></script>

  <div class="tile-body" ng-controller="AdminProspectGridCtrl">

    <div id="grid" ui-grid="gridOptions" ui-grid-pagination class="grid"></div>

  </div>

The pagination controls simply does not appear on screen.

Upvotes: 1

Views: 1107

Answers (1)

spacedev
spacedev

Reputation: 1190

The similar issue I resolved by adding a 'ui.grid.pagination' dependency to the module

var app = angular.module('app', [
    'ui.grid',
    'ui.grid.pagination'
]);

And my version is 

"angular-ui-grid": "^4.8.0",

same for another issue here angular-ui-grid pagination missing

hope its resolved

Upvotes: 0

Related Questions