AngularJS分页显示的简单案例

た入场券 2022-05-19 05:48 388阅读 0赞

由于我下载的anjularJs是1.3的,所以有些代码会和1.5以及之后的有些不同.虽然代码可能不同,但是分页思想还是差不多的.

<body ng-app="myApp" ng-controller="myController">
            <table class="table table-bordered">
                <tr>
                    <th>序号</th>
                    <th>后宫牌号</th>
                    <th>花名</th>
                    <th>价格</th>
                </tr>
                <tr ng-repeat="person in people">
                    <td>{
       {$index+1}}</td>
                    <td>{
       {person.id}}</td>
                    <td>{
       {person.name}}</td>
                    <td>{
       {person.price}}</td>
                </tr>
            </table>
            
            <div>
                <ul class="pagination pull-right">              
                    <li>
                        <a href ng-click="prev()">上一页</a>
                    </li>
                    <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
                        <a href ng-click="selectPage(page)">{
       {page}}</a>
                    </li>
                    <li>
                        <a href ng-click="next()">下一页</a>
                    </li>
                </ul>           
            </div>
        </body>

*

JS部分

<script type="text/javascript">
            var myApp=angular.module("myApp",[]);
            myApp.controller('myController',["$scope", "$http",function($scope,$http){
        // 分页组件 必须变量
                $scope.currentPage = 1; // 当前页 （请求数据）
                $scope.pageSize = 4; // 每页记录数 （请求数据）
                $scope.totalCount = 0; // 总记录数 （响应数据）
                $scope.totalPages = 0; // 总页数 （根据 总记录数、每页记录数 计算 ）
    
                //加载上一页
                $scope.prev = function() {
                        $scope.selectPage($scope.currentPage - 1);
                    }
                    //加载下一页
                $scope.next = function() {
                        $scope.selectPage($scope.currentPage + 1);
                    }
                    //加载指定页
                $scope.selectPage = function(page) {
                    // page 超出范围
                    if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)) {
                        return;
                    }
                    //发送请求
                    $http({
                        method: 'GET',
                        url: page + '.json',
                        params: {
                            page: page, // 页码
                            pageSize: $scope.pageSize // 每页记录数 
                        }
                    }).success(function(data, status, headers, config) {
                        // 要在分页工具条显示所有页码 
                        $scope.pageList = new Array();
                        // 显示表格数据 
                        $scope.people = data.people;
                        //先根据总记录数去计算总页数
                        $scope.totalCount = data.totalCount; //总记录数
                        $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize); //总页数
                        // 更新当前显示页码 
                        $scope.currentPage = page;
                        //显示分页工具条中间码
                        var begin; // 显示第一个页码
                        var end; // 显示最后一个页码 
                        // 如果每页显示10页,理论上 begin 是当前页 -5 
                        begin = $scope.currentPage - 5;
                        if(begin < 1) { //begin不能小于1
                            begin = 1;
                        }
                        // 显示10个页码，理论上end 是 begin + 9
                        end = begin + 9;
                        if(end > $scope.totalPages) {
                            //最后一页不能大于总页数
                            end = $scope.totalPages;
                        }
                        // 修正begin 的值, 理论上 begin 是 end - 9
                        begin = end - 9;
                        if(begin < 1) { //begin不能小于1
                            begin = 1;
                        }
                        // 将页码加入 PageList集合
                        for(var i = begin; i <= end; i++) {
                            $scope.pageList.push(i);
                        }
                    }).error(function(data, status, headers, config) {
                        // 当响应以错误状态返回时调用
                        alert("出错，请联系管理员 ");
                    });
                }
                //判断是否是当前页
                $scope.isActivePage = function(page) {
                    return page === $scope.currentPage;
                }
                // 初始化，选中第一页
                $scope.selectPage(1);
            }])
        </script>

效果:   
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20220519/3ce08ebefdb94570952be86a66952be7.png
[SouthEast 1]: /images/20220519/cc3e16ab39774f0aa0549d2ddbcc73a7.png
[SouthEast 2]: /images/20220519/0c3a230c1ac849a3aae975dc7e25797a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关 IGeekShop案例6-商品的分页显示

IGeekShop案例6-商品的分页显示 1 预期效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad...

迷南。/ 2024年04月17日 14:08/ 0 赞/ 176 阅读

相关 velocity中简单的分页显示

后台返回的参数是当前页，总数量，list数据，搜索的字符串。 \set($page\_size = 10)//一页大小 \set($page2 = $total

谁践踏了优雅/ 2022年08月21日 09:40/ 0 赞/ 123 阅读

相关 AngularJS分页显示的简单案例

由于我下载的anjularJs是1.3的,所以有些代码会和1.5以及之后的有些不同.虽然代码可能不同,但是分页思想还是差不多的. <body ng-app="myAp

秒速五厘米/ 2022年06月01日 12:59/ 0 赞/ 316 阅读

相关 Angularjs实现分页和分页算法

页面展示效果： ![Center][] 页面HTML代码： <table class="table table-striped" style="margin: 0px;"

秒速五厘米/ 2022年05月19日 05:52/ 0 赞/ 454 阅读

相关 AngularJS分页显示的简单案例

由于我下载的anjularJs是1.3的,所以有些代码会和1.5以及之后的有些不同.虽然代码可能不同,但是分页思想还是差不多的. <body ng-app="myAp

た入场券/ 2022年05月19日 05:48/ 0 赞/ 389 阅读

相关 EasyUI分页显示数据的简单实现方法

分页显示数据一般需要用表格实现，我们使用较为简单的easyui插件来实现，需要用到其中的datagrid方法来实现分页，其中pagination是开启分页功能的属性，下面是代码

ゝ一纸荒年。/ 2022年05月16日 09:47/ 0 赞/ 369 阅读

相关 AngularJS分页插件的使用

最终效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

素颜马尾好姑娘i/ 2022年04月17日 05:17/ 0 赞/ 571 阅读

相关 JS简单实现分页显示

> 完整代码源码可以在[这里][Link 1]下载 1.在 HTML文件建立列表目标节点和翻页器目标节点 <body>

冷不防/ 2022年04月05日 13:28/ 0 赞/ 559 阅读

相关简单分页案例

我使用的是索引分页，这里我以ssh框架的分页用例讲解：分页类Page.java 1 public class Pager<T> { 2 priv

缺乏、安全感/ 2021年11月11日 03:24/ 0 赞/ 535 阅读

相关 android listview表格分页显示,Android ListView分页简单实现

Android ListView分页简单实现分页，开发应用中必不可少。那么，现在就来实现分页功能。首先来想想实现它要有哪些步骤， 1, 实现的组件， 2、初始化第一

╰+哭是因爲堅強的太久メ/ 2021年09月07日 23:38/ 0 赞/ 690 阅读