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

这是我的代码如何在角度ui网格之外放置分页？

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的网格。但我想显示UI网格外的分页，如果数据少于10禁用分页。这是我的掠夺者 http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview

来源

2015-10-05 durga siva kishore mopuru

请更正plunker链接。这不是一个有效的 – SaiGiridhar

我已经更新了一次plunker检查 –

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

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

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

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

来源

2015-10-18 03:44:17 Nadi

我能够利用publicApi和gridApi功能

下面是我的HTML创建自己的分页对角UI格，再下面是我的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事件我网的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; 
       } 
      }

如何复制的图标

在我的示例中，您可以看到我使用字体超棒的图标来复制UI网格分页中的图标。

我还添加了另一个类称为FA-旋转-180获得向后播放按钮：

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

我寻求页面功能如下： （顺便说一句，我在多个表不同的标签，所以忽略开关语句）

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

      }

我希望这可以帮助你！

来源

2016-02-02 20:09:49

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

回答

相关问题