Skip to content

Instantly share code, notes, and snippets.

@cssjidi

cssjidi/index.html

Created February 9, 2015 03:50
Show Gist options
  • Save cssjidi/4ff177cea76697cc57b2 to your computer and use it in GitHub Desktop.
Save cssjidi/4ff177cea76697cc57b2 to your computer and use it in GitHub Desktop.
Download ZIP
angularjs-pagination [angularjs-pagination] // source http://jsbin.com/xetiwa
Raw
index.html
<!DOCTYPE html>
<html ng-app="cssjidi">
<head>
<meta name="description" content="[angularjs-pagination]">
<meta charset="utf-8">
<title>angularjs-pagination</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
</head>
<body ng-controller="demoCtrl">
<page value="pager"></page>
<script src="http://cdn.bootcss.com/jquery/2.1.2/jquery.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular-sanitize.js"></script>
<script id="jsbin-javascript">
angular.module('cssjidi',[])
.service('pagination',[function(){
var _pageCount = 20,
_currentPage = 0,
_totalRecords = 0,
_currentGroup = 1,
_groupCount = 5;
this.pageSize = function(){
return parseInt(Math.ceil(_totalRecords/_pageCount));
};
this.setPageCount = function(count){
_pageCount = parseInt(count);
};
this.setGrountCount = function(count){
_groupCount = parseInt(count);
};
this.setRecords = function(count){
_totalRecords = parseInt(count);
};
this.groupSize = function(){
return Math.ceil(this.pageSize() / _groupCount);
};
this.isFirstPage = function(){
return _currentPage === 1;
};
this.isLastPage = function(){
return _currentPage === parseInt(this.getPageSize());
};
this.isFirstGroup = function(){
return _currentGroup === 1;
};
this.isLastGroup = function(){
return _currentGroup === this.groupSize();
};
this.setPage = function(number){
_currentPage = parseInt(number);
_currentGroup = Math.ceil(_currentPage / _groupCount);
};
this.firstPage = function(){
if(this.isFirstPage()) return;
_currentPage = 1;
this.setPage(1);
};
this.lastPage = function(){
if(this.isLastPage) return;
_currentPage = this.pageSize();
this.setPage(_currentPage);
};
this.prvePage = function(){
if(this.isFirstPage()) return;
_currentPage--;
this.setPage(_currentPage);
};
this.nextPage = function(){
if(this.isLastPage) return;
_currentPage++;
this.setPage(_currentPage);
};
this.pagesList = function(){
var pages = [] ,
startPage = (_currentGroup-1)*_groupCount,
endPage = Math.min(_currentPage,this.pageSize());
for(var number=startPage;number<endPage;number++){
var listArray = {
text:number,
page:number,
limit:_pageCount
};
pages.push(listArray);
}
if(startPage > 1){
var leftList = {
text: '...',
number: _currentGroup*_groupCount+1,
limin:_pageCount
};
pages.push(leftList);
}
if(endPage < this.pageSize()){
var rightList = {
text: '...',
number: _currentGroup*(_groupCount-1),
limin:_pageCount
};
pages.unshift(rightList);
}
};
}])
.directive('page',[function(){
return{
restrict: 'EA',
replace: true,
template: '<div class="pagination"></div>',
scope: {
pager: '=?value'
},
link: function($scope,$element,$attrs){
$scope.$watch('pager',function(value){
if(!value) return;
$scope.pager = value;
console.log(value);
});
}
};
}])
.controller('demoCtrl',['$scope','pagination',function($scope,pagination){
$scope.pager = {};
pagination.setRecords = 421;
}]);
</script>
<script id="jsbin-source-javascript" type="text/javascript">
angular.module('cssjidi',[])
.service('pagination',[function(){
var _pageCount = 20,
_currentPage = 0,
_totalRecords = 0,
_currentGroup = 1,
_groupCount = 5;
this.pageSize = function(){
return parseInt(Math.ceil(_totalRecords/_pageCount));
};
this.setPageCount = function(count){
_pageCount = parseInt(count);
};
this.setGrountCount = function(count){
_groupCount = parseInt(count);
};
this.setRecords = function(count){
_totalRecords = parseInt(count);
};
this.groupSize = function(){
return Math.ceil(this.pageSize() / _groupCount);
};
this.isFirstPage = function(){
return _currentPage === 1;
};
this.isLastPage = function(){
return _currentPage === parseInt(this.getPageSize());
};
this.isFirstGroup = function(){
return _currentGroup === 1;
};
this.isLastGroup = function(){
return _currentGroup === this.groupSize();
};
this.setPage = function(number){
_currentPage = parseInt(number);
_currentGroup = Math.ceil(_currentPage / _groupCount);
};
this.firstPage = function(){
if(this.isFirstPage()) return;
_currentPage = 1;
this.setPage(1);
};
this.lastPage = function(){
if(this.isLastPage) return;
_currentPage = this.pageSize();
this.setPage(_currentPage);
};
this.prvePage = function(){
if(this.isFirstPage()) return;
_currentPage--;
this.setPage(_currentPage);
};
this.nextPage = function(){
if(this.isLastPage) return;
_currentPage++;
this.setPage(_currentPage);
};
this.pagesList = function(){
var pages = [] ,
startPage = (_currentGroup-1)*_groupCount,
endPage = Math.min(_currentPage,this.pageSize());
for(var number=startPage;number<endPage;number++){
var listArray = {
text:number,
page:number,
limit:_pageCount
};
pages.push(listArray);
}
if(startPage > 1){
var leftList = {
text: '...',
number: _currentGroup*_groupCount+1,
limin:_pageCount
};
pages.push(leftList);
}
if(endPage < this.pageSize()){
var rightList = {
text: '...',
number: _currentGroup*(_groupCount-1),
limin:_pageCount
};
pages.unshift(rightList);
}
};
}])
.directive('page',[function(){
return{
restrict: 'EA',
replace: true,
template: '<div class="pagination"></div>',
scope: {
pager: '=?value'
},
link: function($scope,$element,$attrs){
$scope.$watch('pager',function(value){
if(!value) return;
$scope.pager = value;
console.log(value);
});
}
};
}])
.controller('demoCtrl',['$scope','pagination',function($scope,pagination){
$scope.pager = {};
pagination.setRecords = 421;
}]);</script></body>
</html>
Raw
jsbin.xetiwa.js
angular.module('cssjidi',[])
.service('pagination',[function(){
var _pageCount = 20,
_currentPage = 0,
_totalRecords = 0,
_currentGroup = 1,
_groupCount = 5;
this.pageSize = function(){
return parseInt(Math.ceil(_totalRecords/_pageCount));
};
this.setPageCount = function(count){
_pageCount = parseInt(count);
};
this.setGrountCount = function(count){
_groupCount = parseInt(count);
};
this.setRecords = function(count){
_totalRecords = parseInt(count);
};
this.groupSize = function(){
return Math.ceil(this.pageSize() / _groupCount);
};
this.isFirstPage = function(){
return _currentPage === 1;
};
this.isLastPage = function(){
return _currentPage === parseInt(this.getPageSize());
};
this.isFirstGroup = function(){
return _currentGroup === 1;
};
this.isLastGroup = function(){
return _currentGroup === this.groupSize();
};
this.setPage = function(number){
_currentPage = parseInt(number);
_currentGroup = Math.ceil(_currentPage / _groupCount);
};
this.firstPage = function(){
if(this.isFirstPage()) return;
_currentPage = 1;
this.setPage(1);
};
this.lastPage = function(){
if(this.isLastPage) return;
_currentPage = this.pageSize();
this.setPage(_currentPage);
};
this.prvePage = function(){
if(this.isFirstPage()) return;
_currentPage--;
this.setPage(_currentPage);
};
this.nextPage = function(){
if(this.isLastPage) return;
_currentPage++;
this.setPage(_currentPage);
};
this.pagesList = function(){
var pages = [] ,
startPage = (_currentGroup-1)*_groupCount,
endPage = Math.min(_currentPage,this.pageSize());
for(var number=startPage;number<endPage;number++){
var listArray = {
text:number,
page:number,
limit:_pageCount
};
pages.push(listArray);
}
if(startPage > 1){
var leftList = {
text: '...',
number: _currentGroup*_groupCount+1,
limin:_pageCount
};
pages.push(leftList);
}
if(endPage < this.pageSize()){
var rightList = {
text: '...',
number: _currentGroup*(_groupCount-1),
limin:_pageCount
};
pages.unshift(rightList);
}
};
}])
.directive('page',[function(){
return{
restrict: 'EA',
replace: true,
template: '<div class="pagination"></div>',
scope: {
pager: '=?value'
},
link: function($scope,$element,$attrs){
$scope.$watch('pager',function(value){
if(!value) return;
$scope.pager = value;
console.log(value);
});
}
};
}])
.controller('demoCtrl',['$scope','pagination',function($scope,pagination){
$scope.pager = {};
pagination.setRecords = 421;
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment