pagination function redraw () { not called when reload same data (same size)

[samsam321]

I have a button to load the data to data array

and assigned to table

<div class="row-fluid">
        <div ng-if="listViewResultSet.totalItems > 0">
            <table st-table="listViewResultSet.items" class="table table-striped st-table">
                <thead>
                    <tr>
                        <!--<th></th>-->
                        <th><input st-search="DisplayName" placeholder="Display Name"/></th>
                        <th><input st-search="Login" placeholder="Login Name"/></th>
                        <th><input st-search="EmailAddress" placeholder="Email Address"/></th>
                        <th><input st-search="GUID" placeholder="GUID"/></th>
                    </tr>
                    <tr>

                        <!--<th><st-select-all all="listViewResultSet.items"></st-select-all></th>-->
                        <!--<th><input type="checkbox"></th>-->
                        <th st-sort="DisplayName">Name</th>
                        <th st-sort="Login">Login</th>
                        <th st-sort="EmailAddress">Email</th>
                        <th st-sort="GUID">GUID</th>
                    </tr>
                </thead>
                <tbody>
                    <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in listViewResultSet.items">
                        <!--<td></td>-->
                        <!--<td cs-select="row"></td>-->                        
                        <td>{{row.DisplayName}}</td>
                        <td>{{row.LoginName}}</td>
                        <td><a ng-href="mailto:{{row.EmailAddress}}">{{row.EmailAddress}}</a></td>
                        <td>{{row.GUID}}</td>
                    </tr>
                </tbody>                

                <tfoot>
                    <tr>
                        <td colspan="5" class="text-center">
                            <div st-items-by-page="5" st-pagination="" st-template="/template/pagination.custom.html"></div>
                        </td>
                    </tr>
                </tfoot>
            </table>            

            <div ng-hide="!showLoader" class="loading">
                Loading in progress. Please wait until you see results
            </div>

            <div class="no-results" ng-if="listViewResultSet.totalItems == 0">
                No records loaded
            </div>        
        </div>
    </div>

when I press the load button again, the data same data reloaded to listViewResultSet.items

then found out the watch of tableState().pagination won't trigger because of the data and pagination is no change.

scope.$watch(function () {
          return ctrl.tableState().pagination;
        }, redraw, true);

resulted that , the table show all items in the first page instead of 5 until i press next or > the tableState().pagination changed will trigger the watch , and back to normal again.

Would you help to advice how to reset the tableState().pagination ? thanks

Regards

[lorenzofox3]

as your data source is asynchronous, I think you should use st-safe-src. Difficult to say though, can you please provide a running example ? thanks

[samsam321]

Thanks for reply ^^

@lorenzofox3 From the test, I am sure that the data (listViewResultSet.items) is updated. But the control pagination have not triggered , because of the watching conditional have not changed , it is identical , because of the data is identical.

here is the example: https://plnkr.co/edit/KW9rfn0mag1WbEgnzOiG?p=preview

press load button to load the identical data again you will see the first page show 5 item, but the setting is 2 item per page. when you press > , the pagination watch triggered

[lorenzofox3]

So yes you need to tell smart-table your data source will change by using st-safe-src attribure st-table binding value only becomes a variable placeholder for your template (use by the repeater) https://plnkr.co/edit/scXrtsvc1wbguPtTZR11?p=preview