Skip to content

Regression Fix for #2357 the scrollPercentage is not correct #2425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Regression Fix for #2357 the scrollPercentage is not correct #2425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2565b7c
Merged pagination and paging features.
derrabus Dec 18, 2014
651e738
Regression Fix for #2357 the scrollPercentage is not correct if there
jcompagner Dec 23, 2014
a1cd3c5
Merge pull request #2471 from kenwarner/2461_parent_container_scrolling
PaulL1 Dec 31, 2014
f8a68cc
Merge pull request #2399 from derrabus/3.0-issue-2106
PaulL1 Jan 2, 2015
e497eac
Regression Fix for #2357 the scrollPercentage is not correct if there
jcompagner Dec 23, 2014
7330b99
Merge branch 'scrollpercentage_with_infinite_scrolling_fix' of https:…
jcompagner Jan 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 37 additions & 18 deletions misc/tutorial/214_pagination.ngdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,67 @@
@name Tutorial: 214 Pagination
@description

When pagination is enabled, the data is displayed in pages that can be browsed using a page selector.
When pagination is enabled, the data is displayed in pages that can be browsed using using the built in pagination selector.

@example
<example module="app">
<file name="app.js">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {};
$scope.gridOptions1 = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
columnDefs: [
{ name: 'name' },
{ name: 'gender' },
{ name: 'company' }
]
};

$scope.gridOptions.columnDefs = [
{ name:'name'},
{ name:'gender' },
{ name:'company' }
];
$scope.gridOptions2 = {
enablePaginationControls: false,
paginationPageSize: 25,
columnDefs: [
{ name: 'name' },
{ name: 'gender' },
{ name: 'company' }
]
};

$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridOptions2.onRegisterApi = function (gridApi) {
$scope.gridApi2 = gridApi;
}

$http.get('/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
.success(function (data) {
$scope.gridOptions1.data = data;
$scope.gridOptions2.data = data;
});
}]);
</file>
<file name="index.html">
<div ng-controller="MainCtrl">
<p>Page: {{ gridApi.pagination.getPage() }}</p>
<p>Total pages: {{ gridApi.pagination.getTotalPages() }}</p>
<button type="button" class="btn btn-success" ng-click="gridApi.pagination.previousPage()">
<p><strong>Grid with native pagination controls</strong></p>
<div ui-grid="gridOptions1" ui-grid-pagination class="grid"></div>
<br /><br />
<p><strong>Grid pagination controlled via the API</strong></p>
<div ui-grid="gridOptions2" ui-grid-pagination class="grid"></div>
<p>Current page: {{ gridApi2.pagination.getPage() }} of {{ gridApi2.pagination.getTotalPages() }}</p>
<button type="button" class="btn btn-success" ng-click="gridApi2.pagination.previousPage()">
previous page
</button>
<button type="button" class="btn btn-success" ng-click="gridApi.pagination.nextPage()">
<button type="button" class="btn btn-success" ng-click="gridApi2.pagination.nextPage()">
next page
</button>
<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
<button type="button" class="btn btn-success" ng-click="gridApi2.pagination.seek(3)">
go to page 3
</button>
</div>
</file>
<file name="main.css">
.grid {
width: 500px;
width: 600px;
}
</file>
</example>
39 changes: 0 additions & 39 deletions misc/tutorial/215_paging.ngdoc
View file
Open in desktop

This file was deleted.

36 changes: 18 additions & 18 deletions misc/tutorial/314_external_paging.ngdoc → misc/tutorial/314_external_pagination.ngdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
@ngdoc overview
@name Tutorial: 314 External Paging
@name Tutorial: 314 External Pagination
@description

When paging is enabled, the data is displayed in pages that can be browsed using using the built in paging selector.
When pagination is enabled, the data is displayed in pages that can be browsed using using the built in pagination selector.

For external paging, handle the `pagingChanged' to load the page. Set the `gridOptions.totalItems' in the callback.
For external pagination, handle the `paginationChanged' to load the page. Set the `gridOptions.totalItems' in the callback.

@example
This shows combined external paging and sorting.
This shows combined external pagination and sorting.
<example module="app">
<file name="app.js">
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.paging']);
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);

app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {

var pagingOptions = {
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};

$scope.gridOptions = {
pagingPageSizes: [25, 50, 75],
pagingPageSize: 25,
useExternalPaging: true,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
columnDefs: [
{ name: 'name' },
Expand All @@ -35,23 +35,23 @@ This shows combined external paging and sorting.
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
pagingOptions.sort = null;
paginationOptions.sort = null;
} else {
pagingOptions.sort = sortColumns[0].sort.direction;
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.paging.on.pagingChanged($scope, function (newPage, pageSize) {
pagingOptions.pageNumber = newPage;
pagingOptions.pageSize = pageSize;
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};

var getPage = function() {
var url;
switch(pagingOptions.sort) {
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = '/data/100_ASC.json';
break;
Expand All @@ -66,8 +66,8 @@ This shows combined external paging and sorting.
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 100;
var firstRow = (pagingOptions.pageNumber - 1) * pagingOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + pagingOptions.pageSize);
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
});
};

Expand All @@ -77,7 +77,7 @@ This shows combined external paging and sorting.
</file>
<file name="index.html">
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-paging class="grid"></div>
<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>
</file>
<file name="main.css">
Expand Down
Loading