angular smart table - pagination doesn't work on refreshing data object

Question

I'm using angular-smart-table, where I'm able to display my data correctly with pagination. And I do add new records/ update existing records on the same page. Here's the screenshot for reference - But here, I'm facing problems with pagination after adding a new record/ updating existing one. That is on refreshing an object, it doesn't consider pagination and shows all records on same page at once.

Here is my controller code -

$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) {

        })
}

And the respective 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>

So, on refreshing object, What I expect is the similar table with pagination as shown above. And What I'm getting is the table with all records without considering pagination -

Tushar Walzade Tushar Walzade · Accepted Answer · 2017-12-29T10:06:43

I struggled a bit and found an answer! We can use st-safe-src directive on angular-smart-table.

I used it as -

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

Where, allAccountsData is a temporary data object & vm.allAccountsData is an actual one.

Then, I iterated over allAccountsData as -

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

That's it! No any changes in controller code!

angular smart table - pagination doesn't work on refreshing data object

1 Answers