这个分页方法是将数据一次性导入再利用插件分页的方法,会出现数据加载空白的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('异常');
});有可以优化的地方,多多指点,谢谢。
點擊查看更多內容
1人點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦