Reputation: 1347

How to place pagination outside angular ui-grid?

This is my code

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

app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {

  var paginationOptions = {
    pageNumber: 1,
    pageSize: 25,
    sort: null
  };

  $scope.gridOptions = {
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    useExternalPagination: true,
    useExternalSorting: true,
    columnDefs: [
      { name: 'name' },
      { name: 'gender', enableSorting: false },
      { name: 'company', enableSorting: false }
    ],
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
      $scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
        if (sortColumns.length == 0) {
          paginationOptions.sort = null;
        } else {
          paginationOptions.sort = sortColumns[0].sort.direction;
        }
        getPage();
      });
      gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
        paginationOptions.pageNumber = newPage;
        paginationOptions.pageSize = pageSize;
        getPage();
      });
    }
  };

  var getPage = function() {
    var url;
    switch(paginationOptions.sort) {
      case uiGridConstants.ASC:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
        break;
      case uiGridConstants.DESC:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
        break;
      default:
        url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
        break;
    }

    $http.get(url)
    .success(function (data) {
      $scope.gridOptions.totalItems = 100;
      var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
      $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
    });
  };

  getPage();
}
]);

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

In the above code pagination is displayed on ui-grid. but i want to display pagination outside the ui-grid and if data is less than 10 disable pagination. This is my plunker http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview

Upvotes: 4

Answers (2)

Paul Preibisch

Reputation: 4342

I was able to create my own pagination for angular-ui-grid by utilizing the publicApi and gridApi functions

Below is my HTML, and below that is my javascript.

<div>

    <button ng-disabled="videoListPaginationOptions.pageNumber === 1"
            ng-click="videoListGridApi.pagination.seek(1)"
            ng-class="{'cancelCursor':videoListPaginationOptions.pageNumber === 1}"
            role="menuitem" type="button" title="Page to first" aria-label="Page to first"
    >
        <i class="fa fa-step-backward "></i>
    </button>
    <button
            ng-disabled="videoListPaginationOptions.pageNumber === 1"
            ng-class="{'cancelCursor':videoListPaginationOptions.pageNumber === 1}"
            ng-click="videoListGridApi.pagination.previousPage()"

            role="menuitem" type="button" title="Previous Page" aria-label="Previous Page">
        <i class="fa fa-play fa-rotate-180 "></i>
    </button>
    <input ng-model="videoListPaginationOptions.pageNumber"
           ng-change="seekPage('videoList',videoListPaginationOptions.pageNumber)"
            class="ui-grid-pager-control-input" type="text" width="50px"/>&nbsp;/ {{ videoListGridApi.pagination.getTotalPages() }}
    <button role="menuitem" type="button" title="Next Page" aria-label="Next Page"
            ng-click="videoListGridApi.pagination.nextPage()"
    >
        <i class="fa fa-play "></i>
    </button>
    <button
            ng-disabled="videoListGridApi.pagination.pageNumber === videoListGridApi.pagination.getTotalPages()"
            ng-click="videoListGridApi.pagination.seek(videoListGridApi.pagination.getTotalPages())"
            role="menuitem" type="button" title="Page to last" aria-label="Page to last">
        <i class="fa fa-step-forward "></i>
    </button>

</div>

Please note that I created a scope variable called videoListGridApi, which I populate when I register my grid api on the onRegisterApi event:

scope.videoListGridOptions = {
                data: 'data',
                paginationPageSizes: [5, 10, 25, 50],
                paginationPageSize: 5,
                enableFullRowSelection: false,
                enableSelectAll: true,
                enableRowHeaderSelection: true,
                useExternalPagination: true,
                columnDefs: videoListColDefs,
                onRegisterApi: function (gridApi) {
                    scope.videoListGridApi = gridApi;
                }
             }

How I replicated the Icons

In my example, you can see that I use font-awesome icons to replicate the icons in the ui-grid pagination.

I also added another class called fa-rotate-180 to get a backwards play button:

.fa-rotate-180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

My Seek Page function is as follows: (By the way, I have multiple tables in different tabs, so ignore the switch statement)

scope.seekPage = function(tab,page){
                switch (scope.currentTab) {
                case "videoList":
                    scope.videoListGridApi.pagination.seek(parseInt(page));
                    break;
                case "zeroTags":
                    scope.videoListGridApi.pagination.seek(parseInt(page));
                    break;
                case "duplicates":
                    scope.videoListGridApi.pagination.seek(parseInt(page));
                    break;
                }

            }

I hope this helps u!

Upvotes: 0

Nadine

Reputation: 559

To use a custom pagination outside the grid, set enablePaginationControls: false in its gridOptions.

$scope.gridOptions = {
     data: 'data',
     totalItems: $scope.data.length,
     paginationPageSize: 10,
     enablePaginationControls: false,
     paginationCurrentPage: 1,
     columnDefs: [
       {name: 'name'},
       {name: 'car'}
     ]
    }

You can then create your custom pagination directive (or use Bootstrap pagination directive), and bind paginationCurrentPage property to it.

Here is a Plunker with live demo that uses external Bootstrap pagination directive.

Upvotes: 11

How to place pagination outside angular ui-grid?

Answers (2)

Related Questions