Nitesh Virani Nitesh Virani - 5 months ago 356
AngularJS Question

Smart Table Pagination links not working

I have below HTML:

<table st-table="displayedCollection"
st-safe-src="rowCollection"
class="table table-striped"
st-pipe="callServer">
<thead>
<tr>
<th st-sort="id">id</th>
<th st-sort="name">name</th>
</tr>
</thead>
<tbody ng-show="!isLoading">
<tr ng-repeat="row in displayedCollection">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
</tr>
</tbody>
<tbody ng-show="isLoading">
<tr>
<td colspan="2" class="text-center">Loading ... </td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" colspan="2">
<div
st-template="templates/plugins/pagination.html"
st-pagination=""
st-items-by-page="10"
class="ng-isolate-scope">
</div>
</td>
</tr>
</tfoot>
</table>


I have below code in controller:

$scope.callServer = function callServer(tableState) {
var pagination = tableState.pagination;
var start = pagination.start || 0;
var size = pagination.number || 10;
console.log('tableState:', tableState);

$scope.isLoading = true;
TestSuiteService.getPage(start, size, tableState).then(function (response) {
$scope.rowCollection = response.results;
$scope.displayedCollection = [].concat($scope.rowCollection);
tableState.pagination.numberOfPages = response.numberOfPages;
$scope.isLoading = false;
});
};


I have below
st-template


<div class="pagination" ng-if="pages.length >= 2">
<ul class="pagination">
<li ng-if="currentPage > 1">
<a ng-click="selectPage(1)">&lt;&lt;</a>
</li>
<li ng-if="currentPage > 1">
<a ng-click="selectPage(currentPage-1)">&lt;</a>
</li>
<li ng-repeat="page in pages" ng-class="{active: page==currentPage}">
<a ng-click="selectPage(page)">{{page}}</a>
</li>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(currentPage+1)">&gt;</a>
</li>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(numPages)">&gt;&gt;</a>
</li>
</ul>
</div>


When I click on page it fetches the data from server and displays it in table but page does not get selected. Due to this previous page and last page links are also not getting displayed. Page 1 is always remains active.

Answer

I have removed st-safe-src attribute from table so in my case I had to remove st-safe-src="rowCollection" to make it work.