Skip to content

Instantly share code, notes, and snippets.

@eirikb
Created November 16, 2014 22:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eirikb/9961411d6e879b943eb2 to your computer and use it in GitHub Desktop.
Save eirikb/9961411d6e879b943eb2 to your computer and use it in GitHub Desktop.
SharePoint paging
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-sanitize.min.js"></script>
<div ng-app="test-paging" ng-controller="ListController">
<table class="table table-bordered">
<tr ng-repeat="item in items">
<td>{{item.Title}}</td>
<td ng-bind-html="item.Body"></td>
</tr>
</table>
<nav>
<ul class="pagination">
<li ng-repeat="page in pages" ng-class="{active: activePage === page}">
<a href="#" ng-click="load(page)">{{page}}</a>
</li>
</ul>
</nav>
</div>
<script>
angular.module('test-paging', ['ngSanitize'])
.controller('ListController', function($scope, $q, $http) {
var listUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Announce')/";
var itemLimit = 10;
$scope.load = function(page) {
$scope.activePage = page;
$q.all({
items: $http.get(listUrl + "Items", {
params: {
$select: "Title,Body",
$top: itemLimit,
$skiptoken: "Paged=TRUE&p_ID=" + ((page - 1) * itemLimit)
}
}).then(function(res) {
return res.data.value;
}),
itemCount: $http.get(listUrl + "ItemCount").then(function(res) {
return res.data.value;
})
}).then(function(res) {
$scope.items = res.items;
var pageCount = Math.floor(res.itemCount / itemLimit) + 1;
$scope.pages = _.range(1, pageCount + 1);
});
};
$scope.load(1);
});
</script>
@mehdijalal001
Copy link

in my console I get this error:
RangeError: Invalid array length
at Function.h.range (underscore.js:628)
at PANJ.aspx:763
at angular.js:12914
at h.$eval (angular.js:14123)
at h.$digest (angular.js:13939)
at h.$apply (angular.js:14227)
at p (angular.js:9493)
at J (angular.js:9678)
at XMLHttpRequest.t.onload (angular.js:9621)angular.js:11358 (anonymous function)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment