angular -- 无刷新做分页

无刷新做分页参考地址:

http://www.jq22.com/demo/angular201707111100/

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://www.jq22.com/jquery/angular-1.4.6.js"></script>
<script type="text/javascript" src="http://www.jq22.com/demo/angular201707111100/js/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="http://www.jq22.com/demo/angular201707111100/css/bootstrap.min.css"> 
<style>
.panel{width:60%;margin:0 auto;text-align: center;}
.form-inline{width:60%;margin:0 auto;}
</style>
</head>    
<body ng-app="app" ng-controller="ctrl">
    <div class="panel">
        <div class="row req form-inline">
            <div class="col-md-8 col-md-offset-4 solid_top form-group">
                <div class="pull-right">
                    <label>展示条数: 
                        <select  class="form-control" ng-change="change(selectedLimit)" ng-model="selectedLimit" ng-options="value.limit for value in values"></select>
                    </label>
                </div>
            </div>
        </div>  
        <table class="table">
            <thead>
                <tr>
                    <td>序号</td>
                    <td>模块</td>
                    <td>信息</td>
                    <td>时间</td>
                </tr>
            </thead>
            <tbody>
                <tr  ng-repeat="data in datas">
                    <td>{{data.order}}</td>
                    <td>{{data.module}}</td>
                    <td>{{data.message}}</td>
                    <td>{{data.time}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="row form-inline">
        <div class="col-md-8">
              <uib-pagination 
                  total-items="page.totalCount" 
                  ng-model="page.pageNo" 
                  max-size="5" 
                  class="samplePage pagination" 
                  boundary-links="true" 
                  force-ellipses="false"
                  first-text="首页" 
                  last-text="末页" 
                  previous-text="上一页"
                  next-text="下一页" 
                  items-per-page="page.limit"
                  ng-change="pageChanged()" 
                  boundary-link-numbers="true"
                  >
          </uib-pagination>
        </div> 
          <div class="col-md-4">
            <input type="text" class="form-control" style="width:100px;margin:25px 0" name="" ng-model="go" />
            <a class="btn btn-primary btn-sm" ng-click="setPage(go)">跳转</a>
          </div>  
    </div>
    <script type="text/javascript">
        var allJson = {"total":20,"data":[
            {
              "order":10,"module":"模块10",
              "message":"信息1",
              "time":"2016-07-02"
            },{
              "order":9,"module":"模块9",
              "message":"信息2",
              "time":"2016-07-02"
            },{
              "order":8,"module":"模块8",
              "message":"信息3",
              "time":"2016-07-02"
            },
            {
              "order":7,"module":"模块7",
              "message":"信息4",
              "time":"2016-07-02"
            },{
              "order":6,"module":"模块6",
              "message":"信息5",
              "time":"2016-07-02"
            },
            {
              "order":5,"module":"模块5",
              "message":"信息6",
              "time":"2016-07-02"
            },{
              "order":4,"module":"模块4",
              "message":"信息7",
              "time":"2016-07-02"
            },
            {
              "order":3,"module":"模块3",
              "message":"信息8",
              "time":"2016-07-02"
            },{
              "order":2,"module":"模块2",
              "message":"信息9",
              "time":"2016-07-02"
            },
            {
              "order":1,"module":"模块1",
              "message":"信息10",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息11",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息12",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息13",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息14",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息15",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息16",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息17",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息18",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息19",
              "time":"2016-07-02"
            },{
              "order":1,"module":"模块1",
              "message":"信息20",
              "time":"2016-07-02"
            }]
        };
        var pageApp = angular.module("app",['ui.bootstrap']);        
        pageApp.controller("ctrl",function($scope, $http){
            /*$http({
                method: 'GET',
                url: 'test.json'
            }).success(function (response) {
                //总条数
                $scope.total = response.total;
                //反转函数转化abcd转dcba
                $scope.data = response.data.reverse();
                //选择显示的条数
                $scope.values = [{"limit":3},{"limit":4},{"limit":5},{"limit":6},{"limit":7},{"limit":8}];
                //默认显示的条数
                $scope.selectedLimit=$scope.values[0];
                //默认显示当前页数
                $scope.currentPage = 1;
                if($scope.data != null){
                    $scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.currentPage-1),$scope.selectedLimit.limit*$scope.currentPage);
                }else{
                    alert($scope.data);
                }
                $scope.page = {
                "limit":$scope.selectedLimit.limit,"pageSize":5,"pageNo":$scope.currentPage,"totalCount":$scope.total};
            })*/            
            //总条数
            $scope.total = allJson.total;
            //反转函数转化abcd转dcba
            $scope.data = allJson.data.reverse();
            //选择显示的条数
            $scope.values = [{"limit":1},{"limit":1},{"limit":3},{"limit":4},{"limit":5}];
            //默认显示的条数
            $scope.selectedLimit=$scope.values[0];
            //默认显示当前页数
            $scope.currentPage = 1;
            if($scope.data != null){
                $scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.currentPage-1),$scope.selectedLimit.limit*$scope.currentPage);
            }else{
                alert($scope.data);
            }
            $scope.page = {
            "limit":$scope.selectedLimit.limit,"pageSize":5,"pageNo":$scope.currentPage,"totalCount":$scope.total};
            //console.log($scope.data);
            $scope.change = function(selectedLimit){
                $scope.page.limit = selectedLimit.limit;
                $scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
            }
            $scope.pageChanged = function(){
                $scope.page.limit = $scope.selectedLimit.limit;
                $scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
            }
            $scope.setPage = function (go) {
                $scope.length = Math.ceil($scope.total/$scope.selectedLimit.limit);
                console.log($scope.length);
                if(go > $scope.length){
                    $scope.page.pageNo =  $scope.length;
                    console.log($scope.length);
                    
                }else{
                    $scope.page.pageNo=go; 
                }
                $scope.datas = $scope.data.slice($scope.selectedLimit.limit*($scope.page.pageNo-1),$scope.selectedLimit.limit*$scope.page.pageNo);
            };
    });
    </script>
</body>
</html>

 

posted @ 2018-03-19 12:48  帅到要去报警  阅读(305)  评论(0编辑  收藏  举报