Custom pagination on service portal custom widget

[Sid_Trip]

Hi all,

I want to create a custom pagination on my custom service portal page. I have checked various sources on angular directive but it is not working for me. I want to implement like below.

Thanks

[Ratnakar7 · Accepted solution]

Hi @Sid_Trip ,

To implement custom pagination on a service portal custom widget, you can follow these steps:

1. Create a custom widget in Service Portal and add the necessary HTML elements for the pagination, such as Previous and Next buttons, and a current page number display.
2. In the widget controller, create a function that will handle the pagination logic, including updating the current page number, calculating the new start and end index of the displayed data, and fetching the data to display for the new page.
3. Bind the pagination function to the Previous and Next buttons using ng-click directives.
4. Use the start and end index values to slice the data array in the widget template, so that only the current page's data is displayed.
5. To ensure that the pagination remains consistent when sorting or filtering the data, you can add an event listener to the relevant fields and re-run the pagination function when they are changed.

Here's an example of a pagination function that can be used in the widget controller:

$scope.currentPage = 1;
$scope.itemsPerPage = 10;

$scope.paginate = function() {
  var start = ($scope.currentPage - 1) * $scope.itemsPerPage;
  var end = start + $scope.itemsPerPage;
  $scope.displayedData = $scope.data.slice(start, end);
};

$scope.prevPage = function() {
  if ($scope.currentPage > 1) {
    $scope.currentPage--;
    $scope.paginate();
  }
};

$scope.nextPage = function() {
  if ($scope.currentPage < $scope.totalPages) {
    $scope.currentPage++;
    $scope.paginate();
  }
};

Also, refer another community thread Pagination in service portal 

Thanks,

Ratnakar

[Sid_Trip]

Thanks  @Ratnakar7