Nitesh Virani Nitesh Virani - 1 year ago 588
AngularJS Question

Smart Table Pagination links not working

I have below HTML:

<table st-table="displayedCollection"
class="table table-striped"
<th st-sort="id">id</th>
<th st-sort="name">name</th>
<tbody ng-show="!isLoading">
<tr ng-repeat="row in displayedCollection">
<tbody ng-show="isLoading">
<td colspan="2" class="text-center">Loading ... </td>
<td class="text-center" colspan="2">

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

<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 ng-if="currentPage > 1">
<a ng-click="selectPage(currentPage-1)">&lt;</a>
<li ng-repeat="page in pages" ng-class="{active: page==currentPage}">
<a ng-click="selectPage(page)">{{page}}</a>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(currentPage+1)">&gt;</a>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(numPages)">&gt;&gt;</a>

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 Source

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.