Could someone assist me with adding pagination within an accordion? I’d really appreciate the help!
HTML Code:
<!DOCTYPE html>
<html ng-app="simpleApp">
<head>
<title>Simple AngularJS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="SimpleController">
<div class="accordion-item" ng-repeat="item in pgmg" ng-class="{'active': item.isOpen}">
<div class="accordion-header" ng-click="toggle(item)">
<h4>{{item.automationState}}</h4>
</div>
<div class="accordion-content">
<table class='table table-striped'>
<thead class='thead-dark'>
<tr>
<th>Migration context</th>
<th>CHG number</th>
<th>Instance Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pgmgObj in getPaginatedData(item)">
<td>{{pgmgObj.migrationContext}}</td>
<td>{{pgmgObj.chg}}</td>
<td>{{pgmgObj.instanceName}}</td>
</tr>
</tbody>
</table>
<!-- Pagination controls for each item -->
<uib-pagination
total-items="item.details.length"
ng-model="item.currentPage"
items-per-page="itemsPerPage"
max-size="5"
boundary-links="true">
</uib-pagination>
</div> <!--accordion-content-->
</div> <!--accordion-item-->
</body>
</html>
JavaScript Code:
// Define the AngularJS module and controller
angular.module('simpleApp', [])
.controller('SimpleController', function($scope) {
$scope.pgmg = [
{
automationState: "Scheduled",
isOpen: true,
currentPage: 1,
details: [
{ migrationContext: "000123", chg: "chg123", instanceName: "test123" },
{ migrationContext: "000346", chg: "chg346", instanceName: "test346" },
{ migrationContext: "000456", chg: "chg456", instanceName: "test456" },
{ migrationContext: "000789", chg: "chg789", instanceName: "test789" },
{ migrationContext: "000101", chg: "chg101", instanceName: "test101" },
{ migrationContext: "000202", chg: "chg202", instanceName: "test202" }
]
},
{
automationState: "In Progress",
isOpen: false,
currentPage: 1,
details: [
{ migrationContext: "000123", chg: "chg123", instanceName: "test123" },
{ migrationContext: "000346", chg: "chg346", instanceName: "test346" },
{ migrationContext: "000456", chg: "chg456", instanceName: "test456" },
{ migrationContext: "000789", chg: "chg789", instanceName: "test789" },
{ migrationContext: "000101", chg: "chg101", instanceName: "test101" },
{ migrationContext: "000202", chg: "chg202", instanceName: "test202" }
]
}
];
// Function to toggle accordion item open/closed state
$scope.toggle = function(item) {
item.isOpen = !item.isOpen;
};
$scope.itemsPerPage = 3;
$scope.getPaginatedData = function(item) {
const startIndex = (item.currentPage - 1) * $scope.itemsPerPage;
const endIndex = startIndex + $scope.itemsPerPage;
return item.details.slice(startIndex, endIndex);
};
});
I’m including the currentPage value in my data object so that each accordion’s pagination starts from the correct page. In the HTML section, I’m calling getPaginatedData and passing ‘item’ to it.