<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular-semantic-pagination</title>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/semantic-ui/0.16.1/javascript/semantic.min.js"></script>
<link href="http://cdn.bootcss.com/semantic-ui/0.16.1/css/semantic.css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
window.data = [];
for (var i = 0; i < 300; i++) {
data.push({
id: i,
name: "item" + i,
description: "description" + i,
});
}
</script>
</head>
<body data-ng-app="app">
<table class="ui table segment" data-ng-controller="appController">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="x in items">
<td>{{ x.id }}</td>
<td>{{ x.name }}</td>
<td>{{ x.description }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">
<div class="ui pagination menu" data-ng-controller="PaginationController" data-ng-init="init(100)">
<a class="icon item" data-ng-show="currentPage != 0" data-ng-click="prevPage()">
<i class="icon left arrow"></i>
</a>
<a class="item" data-ng-repeat="n in items track by $index"
data-ng-class="{'active': n == currentPage, 'disabled' : n == -1}"
data-ng-bind="n == -1 ? '...' : n + 1"
data-ng-click="setPage(n)">
</a>
<a class="icon item" data-ng-show="currentPage != pageCount - 1" data-ng-click="nextPage()">
<i class="icon right arrow"></i>
</a>
</div>
</th>
</tr>
</tfoot>
</table>
<script>
var app = angular.module("app", []);
app.controller("appController", function ($scope, $window) {
$scope.items = [];
//$scope.items = $window.data;
});
app.controller("PaginationController", function ($scope) {
//当前页索引
$scope.currentPage = 0;
//总页数
$scope.pageCount = 0;
//每页显示条数
$scope.items_per_page = 10;
//连续分页主体部分分页条目数
$scope.num_display_entries = 6;
//两侧首尾分页条目数
$scope.num_edge_entries = 2;
$scope.items = [];
$scope.init = function (pageCount) {
$scope.currentPage = 0;
$scope.pageCount = pageCount;
$scope.items = $scope.getRange($scope.currentPage, $scope.pageCount);
}
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.nextPage = function () {
if ($scope.currentPage < $scope.pageCount - 1) {
$scope.currentPage++;
}
};
$scope.setPage = function (n) {
if (n >= 0) {
$scope.currentPage = n;
}
};
$scope.$watch('pageCount', function () {
if ($scope.currentPage == 0) {
$scope.items = $scope.getRange($scope.currentPage, $scope.pageCount);
}
else {
$scope.currentPage = 0;
}
});
$scope.$watch('currentPage', function () {
$scope.items = $scope.getRange($scope.currentPage, $scope.pageCount);
});
$scope.getRange = function (currentPage, pageCount) {
var ret = [];
var np = pageCount;
var interval = $scope.getInterval(currentPage, pageCount);
// Generate starting points
if (interval[0] > 0 && $scope.num_edge_entries > 0) {
var end = Math.min($scope.num_edge_entries, interval[0]);
for (var i = 0; i < end; i++) {
ret.push(i);
}
if ($scope.num_edge_entries < interval[0]) {
ret.push(-1);
}
}
// Generate interval links
for (var i = interval[0]; i < interval[1]; i++) {
ret.push(i);
}
// Generate ending points
if (interval[1] < np && $scope.num_edge_entries > 0) {
if (np - $scope.num_edge_entries > interval[1]) {
ret.push(-1);
}
var begin = Math.max(np - $scope.num_edge_entries, interval[1]);
for (var i = begin; i < np; i++) {
ret.push(i);
}
}
return ret;
};
/**
* Calculate start and end point of pagination links depending on
* currentPage and num_display_entries.
* @return {Array}
*/
$scope.getInterval = function (currentPage, pageCount) {
var ne_half = Math.ceil($scope.num_display_entries / 2);
var np = pageCount;
var upper_limit = np - $scope.num_display_entries;
var start = currentPage > ne_half ? Math.max(Math.min(currentPage - ne_half, upper_limit), 0) : 0;
var end = currentPage > ne_half ? Math.min(currentPage + ne_half, np) : Math.min($scope.num_display_entries, np);
return [start, end];
}
});
</script>
</body>
</html>
