All geek questions in one place

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>
Run codeHide result
In the above code, pagination is mapped to ui-grid. but I want to display pagination outside of the ui-grid, and if the data is less than 10, turn off pagination. This is my pluker http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview
+4
source share
2 answers

To use custom enablePaginationControls: falsepaging outside the grid, set gridOptions to it.

$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 directive (or use the Bootstrap pagination directive ) and bind a property to it paginationCurrentPage.

Plunker , Bootstrap.

+11

angular -ui-grid, publicApi gridApi

HTML, - 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>

, , videoListGridApi, , api onRegisterApi:

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;
                }
             }

, - ui-.

fa-rotate-180, :

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

" " : (, , switch)

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;
                }

            }

, !

0

Source: https://habr.com/ru/post/1610246/

More articles:


All Articles