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

Abhay Kumar1 · ‎11-13-2024

@Sreekarr Yallap As per my understanding, pls try below if helps you:

slices the details array based on the currentPage and itemsPerPage values:

scope.getPaginatedData = function(item) {

const startIndex = (item.currentPage - 1) * $scope.itemsPerPage;

const endIndex = startIndex + $scope.itemsPerPage;

return item.details.slice(startIndex, endIndex);

};

Toggle() function to open and close each accordion item:

scope.toggle = function(item) {

item.isOpen = !item.isOpen;

};

Modified the ng-repeat inside the table to use getPaginatedData(item) :

<tr ng-repeat="pgmgObj in getPaginatedData(item

)">

Sreekarr Yallap · ‎11-13-2024

Hello @Abhay Kumar1 Thank you for your response. I made the necessary changes, but I'm still having the same issue with pagination; it’s not working 😥

Updated Client:

api.controller = function($scope) {
    /* widget controller */
    var c = this;
    $scope.itemsPerPage = 5;
    $scope.getPaginatedData = function(item) {
        const startIndex = (item.currentPage - 1) * $scope.itemsPerPage;
        const endIndex = startIndex + $scope.itemsPerPage;
        return item.details.slice(startIndex, endIndex);
    };
    // Function to toggle accordion item open/closed state
    $scope.toggle = function(item) {
        item.isOpen = !item.isOpen;
    };
};

Updated 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 getPaginatedData(item)">
            <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>

dgarad · ‎11-13-2024

Hi @Sreekarr Yallap

what is issue ?

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-13-2024

Hello @dgarad have a nested accordion containing tabular data, and I'd like to add pagination for each accordion. While my current code displays the data within the accordion correctly, the pagination isn’t functioning as expected