继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

ng-table后台分页

SOHO树叶
关注TA
已关注
手记 56
粉丝 61
获赞 656

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 src="{{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}……]
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP