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

发布时间：2020-12-17 17:58:19 所属栏目：安全来源：网络整理

导读：这是我的代码 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

这是我的代码

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则禁用分页.
这是我的plunker http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview

解决方法

要在网格外部使用自定义分页,请在其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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!