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 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦