实例详解Angular Js分页显示数据

程序员文章站 2022-04-06 21:49:08

...

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

HTML相关代码：

<p 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>
        <p class="page">
            <span class="nextPage" ng-click="nextPage()">下一页</span>
            <span class="prevPage" ng-click="lastPage()">上一页</span>
            <span>{{cur}}/{{totalPage}} 页  共 {{totalNum}} 条记录</span>
        </p>
    </p>

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)

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

<p 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>
        <p class="page">
            <span class="nextPage" ng-click="nextPage()">下一页</span>
            <span class="prevPage" ng-click="lastPage()">上一页</span>
            <span>{{cur}}/{{totalPage}} 页  共 {{totalNum}} 条记录</span>
        </p>
    </p>

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)

实例详解Angular Js分页显示数据

JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

js中自定义react数据验证组件实例详解

详解Angular的数据显示优化处理

Angular.js中$resource高大上的数据交互详解

Angular.js之作用域scope'@','=','&'实例详解

Angular.js实现注册系统的实例详解

详解Angular.js数据绑定时自动转义html标签及内容

Angular.JS读取数据库数据调用完整实例

angular.js分页代码的实例