首先，樣式是這樣的

首先，Service端是Webapi REST JSON格式

第二，我們建立一個Wrapper Class,這里你也可以定義一個Generic<T>,作為示例，我們這里直接使用List<Employee>

后端分頁使用Entity Framework,這里呢，pageSize我們默認(rèn)為5,

示例的JSON結(jié)果

然后我們要引用兩個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>