Question

这是我的代码

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>

在上面的代码中，分页显示在ui-grid上。但我想在ui-grid之外显示分页，如果数据小于10则禁用分页。这是我的傻瓜http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview

Answer 1

要在网格外使用自定义分页，请在gridOptions中设置enablePaginationControls: false。

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

然后，您可以创建自定义分页指令（或使用Bootstrap pagination directive），并将paginationCurrentPage属性绑定到它。

这是一个使用外部Bootstrap分页指令的Plunker with live demo。

Answer 2

我能够利用publicApi和gridApi函数为angular-ui-grid创建自己的分页

下面是我的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的范围变量，当我在onRegisterApi事件上注册grid api时填充该变量：

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

我如何复制图标

在我的例子中，你可以看到我使用font-awesome图标来复制 ui-grid分页中的图标。

我还添加了另一个名为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;
                }

            }

我希望这有助于你！

如何在角度ui网格外放置分页？

2 个答案: