semantic-ui angularjs pagination

<!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>
semantic-ui angularjs pagination

Chobits

引用和评论

linux上更新nginx证书

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合
