Angular Js 分页显示数据

比眉伴天荒 2022-05-31 13:18 214阅读 0赞

在做项目的时候我们经常会用到分页显示数据，其实原理很简单：就是每次点击（下/上）一页的时候向后台发送请求获取相关JSON数据，我这里演示的是我每次请求都会传给后台两个参数（pageSize–每页要展示的数据、pageNo–当前页码 ），这篇文章分享一下相关内容；  
HTML相关代码：

<div id='demo' ng-app='myApp' ng-controller='myCtrl'> <table> <thead> <th>序号</th> <th>操作人</th> <th>类别</th> <th>电话</th> <th>金额</th> <th>操作时间</th> </thead> <tbody> <tr ng-repeat="item in items"> <td>{ {$index+1}}</td> <td>{ { item.operator}}</td> <td>{ { item.type}}</td> <td>{ { item.tell}}</td> <td>{ { item.price}}</td> <td>{ { item.operateTime}}</td> </tr> </tbody> </table> <div class="page"> <span class="nextPage" ng-click="nextPage()">下一页</span> <span class="prevPage" ng-click="lastPage()">上一页</span> <span>{ { cur}}/{ { totalPage}} 页 共 { { totalNum}} 条记录</span> </div> </div>

CSS代码就不贴上来了，大家自行补充；  
JS代码：

var params={
            pageSize:10,
            pageNo:1
        }；
    var curPage=1;
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope,$http) { 
       init($scope,$http);
    })
    
    function search($http,$scope){ 
                params.pageNo=pageNo;
                $http({
                    method: 'GET',
                    url:后台接口地址,
                    params:params
                }).then(function successCallback(response) { 
                    // 数据总条数
                    $scope.totalNum = response.data.totalNum;
                    // 数据总页数
                    $scope.totalPage = response.data.totalPage;
                    // 数据当前页
                    $scope.cur = curPage;
                    // 列表详细数据
                    var content = response.data.contents;
                    for(var i in content){
                        // 数据操作人
                        content[i].operator= content[i].operator;
                        // 数据电话
                        content[i].tell= content[i].tell;
                        // 数据类别
                        content[i].type = content[i].type;
                        // 数据操作时间
                        content[i].operateTime = content[i].createTime;
                        // 数据价格
                        content[i].price = content[i].price;
                    }
                    $scope.items = content;
                }, function errorCallback(response) { 
                    // 请求失败执行代码
                    if(response!=null)
                        error(response)
                });
            }
    function init($scope,$http){ 
            search($http,$scope);
            $scope.nextPage=function(){ 
                nextPage($http,$scope);
            };
            $scope.lastPage=function(){ 
                lastPage($http,$scope);
            };
        }
    // 点击上一页
    function lastPage($http,$scope){ 
        if(curPage>1){
            curPage--;
            search($http,$scope);
        }
    }
    // 点击下一页
    function nextPage($http,$scope){ 
        if(curPage<totalPage){
            curPage++;
            search($http,$scope);
        }
     }
    
    **注意**
    1、如果在你的项目里有根据数据前面的序号来删除某条数据，建议看下这篇博文[Angular Js中$index的小心使用](http://blog.csdn.net/renfufei/article/details/43061877)
    2、如果你的项目后台传过来的数据没有经过处理是全部的数据可以参考这篇博文[Angular Js表格分页](http://www.cnblogs.com/smilecoder/p/6519833.html)

发表评论取消回复

表情：

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

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

相关阅读

相关 GridView分页显示数据

在GridView上绑定了数据以后,要产生分页效果,首先要选中AllowPaging为true, 然后,写PageIndexChanging事件,在该事件中输入如下代码:

傷城~/ 2022年12月28日 12:33/ 0 赞/ 156 阅读

相关 java分页查询表格显示数据格式_springBoot查询数据分页显示

图片展示 ![84e87b22d83722353318e72d71e04e48.png][] springBoot所有依赖和配置文件都写好的情况下 1、dao接口的实现方

迷南。/ 2022年11月06日 13:56/ 0 赞/ 228 阅读

相关 JSP 分页显示数据 (Oracle)

要实现分页，首先我们要做的就是如何来编写SQL语句，网上也有很多，大家可以搜一下.在这里，我们使用一种比较常用的方式来编写SQL语句。代码如下： ----分页显示

男娘i/ 2022年09月18日 11:42/ 0 赞/ 191 阅读

相关 Struts实现分页显示数据

//操作的数据库中的表名为：UserInfo，有三个属性：userId，userName，userPassword（顾名思义）首先为UserInfo表构造一个相对

柔光的暖阳◎/ 2022年07月14日 07:21/ 0 赞/ 270 阅读

相关 JSP分页显示数据

最近在做一个小程序，用到了JSP的分页。虽然只是最简单的分页，但是还是花了我不少时间。这看似简单的功能，实现起来还是稍微有点麻烦。实现分页功能，需要知道数据的总个数，每页应该有

短命女/ 2022年07月11日 08:12/ 0 赞/ 275 阅读

相关 thinkPHP分页显示数据

第一种：利用Page类和limit方法 1. `//实例化User对象` 2. `$User=M('User');` 3. `//查询满足要求的总记录数` 4. `$

落日映苍穹つ/ 2022年06月10日 02:51/ 0 赞/ 289 阅读

相关 Angular Js 分页显示数据

在做项目的时候我们经常会用到分页显示数据，其实原理很简单：就是每次点击（下/上）一页的时候向后台发送请求获取相关JSON数据，我这里演示的是我每次请求都会传给后台两个参数（pa

比眉伴天荒/ 2022年05月31日 13:18/ 0 赞/ 215 阅读

相关 bootstarp table -- 分页数据显示

在bootstarp table 中，进行数据分页的显示，在使用分页的时候，bootStarp table 提供了两种方式，在这里我们介绍客户端(client)进行数据的分页

我会带着你远行/ 2022年04月12日 11:23/ 0 赞/ 381 阅读

相关 JS简单实现分页显示

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

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

相关 js数据分页

> 这个案例大概是半个月之前做的，由于当时做完以后觉得比较难以接受且不太好理解（代码也比较多一点），就先将它放下了，沉淀过后，我觉得是时候拿出来与大家分享了！整体思想框架：

绝地灬酷狼/ 2022年03月22日 15:10/ 0 赞/ 276 阅读