semantic-ui angularjs pagination

来源：互联网发布：杀人者的记忆知乎编辑：程序博客网时间：2024/05/17 06:46
<!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>
0 0