为了账号安全,请及时绑定邮箱和手机立即绑定

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 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消