Service Portal: Add pagination in accordion

Sreekarr Yallap · ‎11-13-2024

Hello,

Could someone assist me with adding pagination within an accordion? I'd really appreciate the help!

HTML :

<body ng-app="accordionApp">

<div ng-controller="AccordionController">
    <div class="accordion-item" ng-repeat="item in c.data.pgmg" ng-class="{'active': item.isOpen}">
        <div class="accordion-header" ng-click="toggle(item)">
            <h4>{{item.automationState}}</h4>
        </div>
        <div class="accordion-content">
           <div>
 			<table class='table table-striped'>
        <thead class='thead-dark'>
            <tr>
                <th>Migration context</th>
                <th>CHG number</th>
                <th>Instance Name</th>
            </tr>
        </thead>
        <tr ng-repeat="pgmgObj in item.details">
            <td>{{pgmgObj.migrationContext}}</td>
            <td>{{pgmgObj.chg}}</td>
            <td>{{pgmgObj.instanceName}}</td>
        </tr>
    </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>
        </div>
    </div>
</div>
</body>

Client:

api.controller = function($scope) {
    /* widget controller */
    var c = this;

    // Function to toggle accordion item open/closed state
    $scope.toggle = function(item) {
        item.isOpen = !item.isOpen;
    };
    $scope.itemsPerPage = 5;

};
api.filter('startFrom', function() {
    return function(input, start) {
        if (!input || !input.length) {
            return;
        }
        return input.slice(start);
    };
});

Server:

(function() {
    /* populate the 'data' object */
    /* e.g., data.table = $sp.getValue('table'); */
    data.pgmg = [{
            automationState: "Scheduled",
			isOpen: true,
			currentPage: 1, // Add currentPage for each item
            details: [{
                    migrationContext: "MIG000123",
                    chg: "chg123",
                    instanceName: "test123"
                },
                {
                    migrationContext: "MIG000346",
                    chg: "chg346",
                    instanceName: "test346"
                },
                {
                    migrationContext: "MIG000346",
                    chg: "chg346",
                    instanceName: "test346"
                },
                {
                    migrationContext: "MIG000346",
                    chg: "chg346",
                    instanceName: "test346"
                },
                {
                    migrationContext: "MIG000346",
                    chg: "chg346",
                    instanceName: "test346"
                },
                {
                    migrationContext: "MIG000346",
                    chg: "chg346",
                    instanceName: "test346"
                },
                {
                    migrationContext: "MIG000346",
                    chg: "chg346",
                    instanceName: "test346"
                },
                {
                    migrationContext: "MIG000346",
                    chg: "chg346",
                    instanceName: "test346"
                }
            ]
        },
		{
            automationState: "In Progress",
			isOpen: false,
			currentPage: 1, // Add currentPage for each item
            details: [{
                    migrationContext: "MIG000789",
                    chg: "chg789",
                    instanceName: "test789"
                },
                {
                    migrationContext: "MIG000777",
                    chg: "chg777",
                    instanceName: "test777"
                }
            ]
        },
        {
            automationState: "Completed",
			isOpen: false,
			currentPage: 1, // Add currentPage for each item
            details: [{
                    migrationContext: "MIG000789",
                    chg: "chg789",
                    instanceName: "test789"
                },
                {
                    migrationContext: "MIG000777",
                    chg: "chg777",
                    instanceName: "test777"
                }
            ]
        }
    ];


})();

CSS:

 .accordion-header {
            background-color: #f1f1f1;
            padding-top: 5px;
            padding-left: 25px;
   			padding-bottom: 5px;
            cursor: pointer;
            border: 1px solid #ddd;
   			/*box-sizing: border-box; */
   			font-size: 12px;
        }
.accordion-content {
            padding: 10px;
            display: none;
            background-color: #f9f9f9;
        }
.active .accordion-content {
            display: block;
        }

<!-- Table start -->
table {
    table-layout: fixed;
    border-collapse: collapse; /* Use border-collapse to remove space between borders */
    /*border-style: solid;*/
    width: 100%; /* Adjust width as needed */
}
.thead-dark{
  color:#ffffff;
  background-color:#474D52;
  text-align:center;
  /*font-weight:bold;*/
}
tr, th, td {
   /* width: 75%; This may be unnecessary if you want equal width */
    text-align: center;
    word-wrap: break-word;
    padding: 0; /* Remove padding to eliminate white space */
    margin: 0; /* Ensure no margin */
}
<!-- table end -->


p{
  font-size: 20px;
}
.horizontal-line {
    border-top: 2px solid black; /* Thickness and color of the line */
    width: 100%;                /* Width of the line */
    margin: 20px 0;            /* Space above and below the line */
}

body {
  font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
}

Abhay Kumar1 · ‎11-15-2024

@Sreekarr Yallap Please check this one if you can use of in your script if not pls shout;

https://embed.plnkr.co/eheFSh/

View solution in original post

dgarad · ‎11-14-2024

I have change little bit of your code its working .

$scope.getPaginatedData = function(item) {
        var startIndex = (item.currentPage - 1) * $scope.itemsPerPage;
        var endIndex = startIndex + $scope.itemsPerPage;
        return item.details.slice(startIndex, endIndex);
    };

If my answer finds you well, helpful, and related to the question asked. Please mark it as correct and helpful.

Thanks
dgarad

Sreekarr Yallap · ‎11-14-2024

Hello @Abhay Kumar1 @dgarad I can restrict the number of items per page in the accordion, but the issue is that the navigation buttons are not visible within the accordion. Any thoughts ?

Here is my sample code: https://plnkr.co/edit/Zz1s2uMwTKCAvQXd?preview

Abhay Kumar1 · ‎11-15-2024

@Sreekarr Yallap Please check this one if you can use of in your script if not pls shout;

https://embed.plnkr.co/eheFSh/