AngularJS Boostrap Pagination Sample

首先，樣式是這樣的

首先，Service端是Webapi REST JSON格式

第二，咱們創建一個Wrapper Class,這裏你也能夠定義一個Generic<T>,做爲示例，咱們這裏直接使用List<Employee>

後端分頁使用Entity Framework,這裏呢，pageSize咱們默認爲5,

示例的JSON結果

而後咱們要引用兩個AngularJS,一個是AngularJS自己，一個是AngularJS Boostrap

PM> Install-Package angularjs

PM> Install-Package Angular.UI.Bootstrap

剩下的就是代碼了

<h3>This is done by AngularJS</h3>
<ul>

    <script>
        angular.module('myApp', ['ui.bootstrap']);
       
        function pagerCtrl($scope, $http) {
            $scope.maxSize = 5;
            $scope.bigCurrentPage = 1;
            $scope.setPage = function (pageNo) {
                $scope.bigCurrentPage = pageNo;
            };
            $scope.$watch(
                "bigCurrentPage",
                function(newValue, oldvalue) {
                    doPaging(newValue);
                  
                }
            );
            $scope.init = function (pageIndex) {
                doPaging(pageIndex);
            };
            function doPaging(pageIndex) {
                var url = "/api/employee/page/" + pageIndex;
                $http.get(url).success(function (data) {
                    $scope.employeeList = data;
                    var number = new Number(data.TotalCount);
                    //alert(number);
                    $scope.bigTotalItems = number;
                });
            }
        }

    </script>

</ul>
<div class="container" ng-app="myApp" ng-controller="pagerCtrl">
    <table data-ng-init="init(1)">
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
        <tr ng-repeat="item in employeeList.Employees">
            <td>{{item.FirstName}}</td>
            <td>{{item.LastName}}</td>
        </tr>
    </table>
    <pagination total-items="bigTotalItems" items-per-page="5" page="bigCurrentPage"  class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
    <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
</div>