角度智能表 - 分页对刷新数据对象不起作用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了角度智能表 - 分页对刷新数据对象不起作用相关的知识,希望对你有一定的参考价值。

我正在使用angular-smart-table,我可以通过分页正确显示我的数据。我确实在同一页面上添加了新记录/更新现有记录。这里是参考的屏幕截图-smart-table & the form但是在这里,我在添加新记录/更新现有记录后面临分页问题。这是在刷新对象时,它不考虑分页并一次显示同一页面上的所有记录。

这是我的控制器代码 -

$scope.smartTablePageSize = 10;
$scope.rowsPerPage = [5, 10, 15, 20, 25];

// my function to add a new record
vm.insertAccount = function() {
    if(vm.validateAll())
        $http({
            method: 'POST',
            url: addAccountUrl,
            data: vm.accountInfo,
            headers: { 'Content-Type': 'application/json' }
        }).then(function(success) {
            vm.getAllAccountsData();    // refreshing data object
        }, function(error) {
        });
}

// function to refresh data object
vm.getAllAccountsData = function() {
    $http.get(accountListUrl)
        .then(function(success) {
            if (success.data) {
                vm.allAccountsData = success.data;    // updating data here
            }
        }, function(error) {

        })
}

和各自的html -

<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="col-xs-12 form-inline form-group mt-20">
        <label for="rows">Rows on page</label>
        <select class="form-control show-tick" id="rows" title="Rows on page" selectpicker ng-model="smartTablePageSize" ng-options="i for i in rowsPerPage">
        </select>
    </div>
    <table class="table mt-20 mb-20" ng-if="vm.allAccountsData.length > 0" st-table="vm.allAccountsData">
        <thead class="sortable">
            <tr>
                <th class="table-id" st-sort="id" st-sort-default="true">#</th>
                <th st-sort="accounttype">Account Type</th>
                <th st-sort="vendor">Vendor</th>
                <th st-sort="accountnumber">Account No.</th>
                <th st-sort="paymentmode">Payment Mode</th>
                <th st-sort="ponumber">PO No.</th>
                <th st-sort="vendorcode">Vendor Code</th>
                <th st-sort="costcenter">Cost Center</th>
                <th st-sort="glcode">GL Code</th>
                <th>Action</th>
            </tr>
            <tr>
                <th></th>
                <th>
                    <input st-search="accounttype" placeholder="Search Account Type" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="vendor" placeholder="Search Vendor" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="accountnumber" placeholder="Search Account No." class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="paymentmode" placeholder="Search Payment Mode" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="ponumber" placeholder="Search PO No." class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="vendorcode" placeholder="Search Vendor Code" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="costcenter" placeholder="Search Cost Center" class="input-sm form-control search-input" type="search" />
                </th>
                <th>
                    <input st-search="glcode" placeholder="Search GL Code" class="input-sm form-control search-input" type="search" />
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in vm.allAccountsData">
                <td class="table-id">{{item.index + 1}}</td>
                <td>{{item.accounttype}}</td>
                <td>{{item.vendor}}</td>
                <td>{{item.accountnumber}}</td>
                <td>{{item.paymentmode}}</td>
                <td>{{item.ponumber}}</td>
                <td>{{item.vendorcode}}</td>
                <td>{{item.costcenter}}</td>
                <td>{{item.glcode}}</td>
                <td>
                    <button class="btn btn-info editable-table-button btn-xs" ng-click="vm.editAccount(item);">View/Edit</button>
                    <button class="btn btn-danger editable-table-button btn-xs" ng-click="vm.confirmDeleteAccountModal('app/pages/utilities/pdfNormalizer/confirm-delete-account.html', 'sm', item)">Delete</button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="10" class="text-center">
                    <div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="10"></div>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

因此,在刷新对象时,我期望的是具有分页的类似表,如上所示。我得到的是所有记录的表格,而不考虑分页 - This is what I get

答案

我挣扎了一下,找到了答案!我们可以在angular-smart-table上使用st-safe-src指令。

我用它作为 -

<table class="table mt-20 mb-20" st-table="allAccountsData" st-safe-src="vm.allAccountsData">

其中,allAccountsData是一个临时数据对象,vm.allAccountsData是一个实际的数据对象。

然后,我在allAccountsData迭代 -

<tr ng-repeat="item in allAccountsData">

而已!控制器代码没有任何变化!

以上是关于角度智能表 - 分页对刷新数据对象不起作用的主要内容,如果未能解决你的问题,请参考以下文章

分页在角度 7 中不起作用。(我使用角度材料)

CodeIgniter分页不起作用(在其他页面中)

bootstrap-table前台和后台分页对json格式的要求

带有连接表字段排序的 Cakephp 分页不起作用

避免在行跨度不起作用的标题表中出现分页符(打印)

Vs 代码中角度的 Intellisense 不起作用