纯js搭配anjularjs完成前台分页展示

在anjularjs的控制器中首先定义全局变量：

$scope.missions = missions;                             //这个是后台传过来的list数组，所有数据都在这里
$scope.totalPage = Math.ceil($scope.missions.length/10);//10为每页显示多少条数据
$scope.missionList = missions;                          //这里定义页面活动数据，这是个全局变量
$scope.currentPage = 1;                                 //这里定义分页的当前页，全局变量，初始值为1

html页面我借用pagination这个控件来简略分页控件代码书写

<pagination
        boundary-links="true"
        on-select-page="search(page)"  //search为js里面的方法
        num-pages="totalPage"          //总的分页页数
        max-size="20"
        rotate="false"
        current-page="currentPage"     //当前页数
        class="pagination"
        previous-text="'&lsaquo;'"
        next-text="'&rsaquo;'"
        first-text="'&laquo;'"
        last-text="'&raquo;'"
        >
</pagination>

贴出页面循环代码段：

<tr ng-repeat="mission in missionList | limitTo:10"> <!--这里的limitTo是只取该list的前10条数据。如果你用的jsp，肯定有类似方法，我也是从jsp三大框架突然转maven的 -->
    <td align="center">{{ $index + 1 }}</td>
    <td>{{ mission.name }}</td>
    <td>{{ mission.content }}</td>
    <td>{{ mission.user.name }}</td>
    <td>{{ mission.dateStart }}</td>
    <td>{{ mission.dateExp }}</td>
    <td>{{ mission.dateEnd }}</td>
    <td>{{ getMissionFinishZh(mission.finish)}}</td>
</tr>

js控制层search代码：

$scope.search = function (page) {
    var questions = [];
    for(var i = 10*(page -1);i < $scope.missions.length;i++){
        questions.push($scope.missions[i]);
    }
    $scope.missionList = questions;
    $scope.currentPage = page;
};

我之前也看过很多分页的，都需要和后台交互，要么用ajax，我比较懒，就想着在前台进行数据分割，于是就这么写的。如果说jsp用这段代码，要注意的地方就是开头的几个全局变量，可以用session存。或者给它们重新赋值。当然，我没有在jsp上实践，个人意见，仅供参考。