通过angular.js来分页

这个分页方法是将数据一次性导入再利用插件分页的方法，会出现数据加载空白的dom结构空白的现象，可以用ng-show来进行优化。

使用的是ui-bootstrap-tpls.js的分页功能，

在这个插件之前必须先引入angular.js

html代码部分

<div class="row" >
   <div class="col-lg-12">
     <div class="panel panel-default">
    	<div class="panel-body table-responsive">
           <table class="table table-hover">
              <thead>
                <tr>						        
              	  <th>#</th>
              	  <th>订单号</th>
              	  <th>桩编号</th>
              	  <th>已充电量</th>
              	  <th>已充金额</th>
              	  <th>已充时间</th>
              	  <th>订单状态</th>
              	  <th>开始时间</th>
              	  <th>结束时间</th>
              	  <th>操作</th>
              	 </tr>						    
              	 </thead>						    
              	 <tbody>
              	   <tr ng-repeat="order in datas track by $index">
              	   //(page.pageNo-1)*page.limit+$index+1分页后能也能正序排序
              	   <td ng-bind="(page.pageNo-1)*page.limit+$index+1"></td>
              	   <td ng-bind="order.ORDER_ID"></td>
              	   <td ng-bind="order.USER_PILE"></td>
              	   <td ng-bind="order.ELECTRICITY_AMOUNT"></td>
              	   <td ng-bind="order.TOTAL_CONSUMPTION"></td>
              	   <td ng-bind="order.CHARGING_PERIOD"></td>
              	   <td ng-bind="order.ORDER_STATUS | reverse1"></td>
              	   <td ng-bind="order.START_TIME"></td>
              	   <td ng-bind="order.END_TIME"></td>
              	   <td>
              	     <a class="btn btn-default">查看详情</a>
              	   </td>
              	  </tr>						    
              	 </tbody>						
              	 </table>					
              	 </div>				    
              	 <div class="row form-inline">					
              	 <div class="col-md-8">					  	
              	 <ul 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"
              	 </ul>
              	</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>总{{totalItems}}条
              	<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>
              	</div>
              	</div>

js代码部分

$http({
method: 'POST',
url: ' 
data:$.param($scope.order)}).then(function successCallback(response) {
$scope.orders = JSON.parse(response.data);
console.log($scope.orders);
//数据列表
$scope.orderList = $scope.orders[0].orderList;
//数据总条数
$scope.totalItems = $scope.orders[0].count;
//选择显示的条数
$scope.values = [{"limit":10},{"limit":20},{"limit":50}];
//默认显示的条数
$scope.selectedLimit=$scope.values[0];
//默认显示当前页数
$scope.currentPage = 1;
if($scope.orderList != null){
$scope.datas = $scope.orderList.slice($scope.selectedLimit.limit*($scope.currentPage-1),$scope.selectedLimit.limit*$scope.currentPage);
}else{
alert($scope.orderList);
}
$scope.page = {"limit":$scope.selectedLimit.limit,"pageSize":5,"pageNo":$scope.currentPage,"totalCount":$scope.totalItems};}, function errorCallback(response) {
// 请求失败执行代码
console.log('异常');
});

有可以优化的地方，多多指点，谢谢。