ng-table后臺分頁
HTML:
<table ng-table="$ctrl.tableParams" class="table table-60 border-bottom table-vms table-hover table-condensed table-scroll" ng-form="$ctrl.tableForm">
<tbody>
<tr ng-repeat="row in $data" ng-form="rowForm" ng-class="{'bg-gray-vms':row.active === 0}">
<td data-title="'IMAGE' | translate">
<div class="img-xs-vms" ng-click="bigImages(row.productImage)">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{row.productImage}}" alt="">
</div>
</td>
<td data-title="'SUPPLIER' | translate">{{row.supplierName}}</td>
<td data-title="'SKU' | translate">{{row.sku}}</td>
<td data-title="'DESCRIPTION' | translate">{{row.description}}</td>
<td data-title="'VARIATION' | translate">{{row.size}}</td>
<td data-title="'BRAND' | translate">{{row.brand}}</td>
<td data-title="'PRICE' | translate">{{row.priceCost}}</td>
<td data-title="'SELLER_INVENTORY' | translate">{{row.usableQty}}</td>
<td data-title="'FBI_INVENTORY' | translate">{{row.qty}}</td>
<td data-title="'CREATE_DATE' | translate" sortable="'createdTime'">{{row.created | date:'yyyy-MM-dd'}}</td>
<td data-title="'LAST_RECEIVED_DATE' | translate">{{row.lastOrderTime| date:'yyyy-MM-dd'}}</td>
<td data-title="'REQUEST_QUANTITIES' | translate">
<div class="input-xl-box">
<button class="btn" ng-click="$ctrl.updateQty('del',$index,row.purchaseQty)" ng-disabled="row.active === 0">-</button>
<input type="text" ng-model="row.purchaseQty" ng-keyup="$ctrl.keyup($index,row.purchaseQty)" ng-disabled="row.active === 0">
<button class="btn" ng-click="$ctrl.updateQty('add',$index,row.purchaseQty)" ng-disabled="row.active === 0">+</button>
</div>
</td>
<td data-title="'ACTION' | translate">
<div class="whole-word">
<button class="btn-default-vms" ng-click="$ctrl.addList(row,rowForm)" ng-disabled="row.active === 0">{{ 'BTN_ADD' | translate }}</button>
<button class="btn-default-vms" ng-click="$ctrl.goInfo(row)" ng-disabled="row.active === 0">{{ 'INFO' | translate }}</button>
</div>
</td>
</tr>
</tbody>
</table>JS:
this.tableParams = new NgTableParams({
count: this.pageSize
}, {
counts: [],
paginationMaxBlocks: 6,
paginationMinBlocks: 2,
getData: (params) => {
let object = {
pageSize: params.count(),
pageNo: params.page(),
filterMap: searchInfo
};
return productDataService.getCreateList(object).then(res => {
this.items = res.data.elements;
this.allTotal = res.data.total;
params.total(res.data.total);
return this.items;
});
}
});如果需要后台分页:
getData: (params) => {
let object = {
pageSize: params.count(),
pageNo: params.page(),
filterMap: searchInfo
};
return productDataService.getCreateList(object).then(res => {
this.items = res.data.elements;
this.allTotal = res.data.total;
params.total(res.data.total);
return this.items;
});
}如果想直接前端分页可以参照官网的dataset:
getData ==> dataset
dataset:[{key:value},{key:value},{key:value}……]
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦