如何在角度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網格之外放置分頁？

回答

相關問題