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>
