Pagination in service portal

[malu]

I have a pagination to setup for a widget. My widget displays information from a custom table. Customer like to have a pagination to setup for the list of records produced in the widgets BUT unable to run a filter on the client script.

my code below

HTML

<tr ng-repeat="item in c.data.usersList | startFrom: currentPage*pageSize | limitTo: pageSize">

<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">

              Previous

  </button>

      {{currentPage+1}}/{{numberOfPages()}}

<button ng-disabled="currentPage >= c.data.usersList.length/pageSize - 1" ng-click="currentPage=currentPage+1">

              Next

  </button>

Client script:

function($scope){

$scope.currentPage = 0;

  $scope.pageSize = 12;

      $scope.numberOfPages=function(){

              return Math.ceil($scope.c.data.usersList.length/$scope.pageSize);                              

      }

$scope.filter('startFrom', function() {

      return function(input, start) {

              start = +start; //parse to int

              return input.slice(start);

}

      });

}

I can get the Previous button and Nextbutton with the total number of pages but unable to see the data for it.

$scope.filter is responsible to produce the output BUT somehow is the failing.

Pls help

[larstange · Accepted solution]

Hi

For pagination I would recommend using "Pagination Directive": angularUtils/src/directives/pagination at master · michaelbromley/angularUtils · GitHub

I have used that in a variety of widgets and its is really a plug'n'play solution where you don't have to build all the logic your self.

[malu]

Thanks Lars Tange I achieved pagination with your help.

[rajeevlochan82]

Such a Helpful Post Lars !!!!

[Ximizu1]

thanks for your solution larstange, it works quite well for me.

But I have this issue and wondering if you know what is the root cause:

When the page loads the first time, the widget is not displayed, but after, I navigate to another page, and come back to the page with the widget, then, the widget is displayed.

widget not displayed when the page loads the first time

widget displayed after having navigate to other pages and come back to this page

Apparently, it is related to the angular provider, because when I don't use it, the widget always is displayed correctly.

Here the HTML code

<div ng-if="data.count" class="panel panel-default wrapper">
  <table class="table">
    <th ng-repeat="field in ::data.fields">{{field}}</th>
    <tr dir-paginate="record in ::data.records | itemsPerPage: options.max_item_per_page">
      <td ng-repeat="field in ::data.tableFields">
        <a ng-if="$first" href="{{::record.url}}">{{::record[field]}}</a>
        <span ng-if="!$first">{{::record[field]}}</span>
      </td>
    </tr>
  </table>    
  <dir-pagination-controls></dir-pagination-controls>
</div>

<div ng-if="!data.count" class="panel panel-default wrapper text-center">
{{::options.no_records_message}}
</div>

and the angular provider attached correctly to the widget

Do you know what is happening?

Ximizu
Senior Consultant
Co-founder of CloudSpirit