Вопрос или проблема
Может кто-то помочь мне с добавлением пагинации в аккордеон? Я был бы признателен за помощь!
HTML код:
<!DOCTYPE html>
<html ng-app="simpleApp">
<head>
<title>Простой пример AngularJS</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>Контекст миграции</th>
<th>Номер CHG</th>
<th>Имя экземпляра</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>
<!-- Элементы управления пагинацией для каждого элемента -->
<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 код:
// Определение модуля и контроллера AngularJS
angular.module('simpleApp', [])
.controller('SimpleController', function($scope) {
$scope.pgmg = [
{
automationState: "Запланировано",
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: "В процессе",
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" }
]
}
];
// Функция для переключения состояния аккордеона открыто/закрыто
$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);
};
});
Я включаю значение currentPage в объект данных, чтобы каждая пагинация аккордеона начиналась с правильной страницы. В разделе HTML я вызываю getPaginatedData и передаю ‘item’ в качестве аргумента.
.
Ответ или решение
Пагинация для вложенного аккордеона в AngularJS
Создание интерфейса, включающего пагинацию внутри вложенного аккордеона, может показаться сложной задачей, но с использованием AngularJS это можно сделать достаточно просто. В этом ответе мы рассмотрим, как реализовать такую функциональность с учетом предоставленных вами HTML и JavaScript кодов.
Структура HTML
Сначала мы обобщим структуру HTML, используемую для аккордеона. В данном случае каждый элемент аккордеона представляет собой объект с возможностью раскрытия, что мы и используем для отображения данных, которые будут пагинацией. Использование ng-repeat обеспечивает динамическое создание элементов на основе данных, переданных из контроллера.
<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>
<!-- Элементы пагинации -->
<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>JavaScript Логика
Ваша JavaScript логика задает нужные параметры для работы пагинации. Вы правильно включили свойство currentPage в каждый объект аккордеона, чтобы отслеживать текущее состояние пагинации для каждого элемента. Рассмотрим реализацию функции getPaginatedData, которая отвечает за получение только тех объектов, которые должны быть отображены на текущей странице.
$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);
};Важные моменты реализации
-
Пагинация на основе текущей страницы: Убедитесь, что
ng-modelдля элемента пагинации правильно связывается сitem.currentPage. Это позволяет каждому аккордеону контролировать свою пагинацию независимо от других. -
Отображение данных: Функция
getPaginatedData(item)корректно вычисляет индексы для среза массиваdetails, учитывая количество элементов на странице. -
Пользовательский интерфейс: Выбор компонентов, таких как
uib-pagination, позволяет улучшить интерфейс пользователя и упростить культурное взаимодействие. Убедитесь, что стиль ваших элементов соответствует общему дизайну вашего приложения.
Заключение
Реализация пагинации в аккордеоне с помощью AngularJS – это мощный инструмент для управления отображением больших объемов данных. Правильное использование переменной currentPage и вычисляемой функции для возврата только видимых данных обеспечивает оптимизированный интерфейс. Изучение и настройка таких функций имеют важное значение для развития ваших навыков веб-разработки на AngularJS. Следуя приведенным рекомендациям, вы сможете создать удобный и эффективный интерфейс для работы с данными.