Angular Js 페이징 표시 데이터의 자세한 예-JS 튜토리얼-php.cn

Angular Js 페이징 표시 데이터의 자세한 예

小云云

풀어 주다： 2018-02-27 14:17:08

원래의

1543명이 탐색했습니다.

프로젝트 작업 시 페이징을 사용하여 데이터를 표시하는 경우가 많습니다. 실제로 원리는 매우 간단합니다. 페이지(다음/이전)를 클릭할 때마다 관련 JSON 데이터를 얻기 위해 요청이 백그라운드로 전송됩니다. 여기서 설명할 때마다 요청은 두 개의 매개변수(pageSize – 각 페이지에 표시할 데이터, pageNo – 현재 페이지 번호)를 사용하여 백그라운드로 전달됩니다.

HTML 관련 코드:

<p id=&#39;demo&#39; ng-app=&#39;myApp&#39; ng-controller=&#39;myCtrl&#39;>
        <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(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope,$http) {
   init($scope,$http);
})function search($http,$scope){
            params.pageNo=pageNo;            $http({
                method: &#39;GET&#39;,
                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=&#39;demo&#39; ng-app=&#39;myApp&#39; ng-controller=&#39;myCtrl&#39;>
        <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(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope,$http) {
   init($scope,$http);
})function search($http,$scope){
            params.pageNo=pageNo;            $http({
                method: &#39;GET&#39;,
                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)

로그인 후 복사