Angular Js 分页显示数据

比眉伴天荒 2022-05-31 13:18 216阅读 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 条评论，216人围观）

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

相关阅读

相关查询数据分页显示方法

一个计算页数的方法。首先明确你一页想显示多少条，例如 X条。第一步，查询总记录数，有Y条。计算页数 nAllPage = Y/X+(Y%X?1:0) 下面就

左手的ㄟ右手/ 2023年01月05日 05:08/ 0 赞/ 214 阅读

相关 GridView分页显示数据

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

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

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

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

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

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

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

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

相关 JSP分页显示数据

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

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

相关 thinkPHP分页显示数据

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

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

相关 Angular Js 分页显示数据

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

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

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

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

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

相关 JS简单实现分页显示

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

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

相关 js数据分页

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

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