我遇到了同样的问题，最后设法为同位素添加了分页。虽然我的解决方案有效，但在管理大数据时却无济于事，因为所有数据都已加载并因此被过滤。
首先，我将所有内容分成页面，并为每个项目分配匹配的 css 类（page1、page2、page3、...）。然后我在前端添加了分页，并使用 JavaScript 设置了匹配过滤器。以下是我的 TYPO3 Extbase 设置中的一些代码示例：
Controller 中的 PHP 计算页面过滤器的 css 类：
$itemsPerPage = 6;
$c = 1;
$catPages = array(); // needed for categories, so that both filters (page and category) work together
foreach ( $projects AS $key => $project ) {
$page = ceil( $c / $itemsPerPage );
$projects[ $key ]->pageClass = 'page' . $page;
$c++;
// Get all categories of project to calculate the category-related page
$cats = $project->getCategories();
foreach ( $cats AS $cat ) {
/* @var $cat \TYPO3\CMS\Extbase\Domain\Model\Category */
$catid = $cat->getUid();
$catPages[ $catid ]++;
$catPage = ceil( $catPages[ $catid ] / $itemsPerPage );
$projects[ $key ]->pageClass .= ' cat' . $catid . 'page' . $catPage;
}
}
$nrPages = ceil( count( $projekts ) / $itemsPerPage );
$nrCatPages = array();
foreach ( $catPages AS $key => $value ) {
$object = new \stdClass();
$object->catid = $key;
$object->nrPages = ceil( $value / $itemsPerPage );
$nrCatPages[] = $object;
}
$this->view->assign( 'projects', $projects );
$this->view->assign( 'kategorien', $kategorien );
$this->view->assign( 'nrPages', $nrPages );
$this->view->assign( 'nrCatPages', $nrCatPages );
使用这段代码，我计算出了所有需要的 css 类。
模板中的 HTML
在 HTML 代码中，我为每个项目分配了 CSS 类，这是在控制器中使用 <div class="item {project.pageClass}">... 计算的
然后我为分页添加了 HTML 代码：
<div id="pagination-wrap">
<!-- Pagination for all items (no category selected) -->
<f:if condition="{nrPages}>1">
<ul class="pagination-cm all">
<li class="pageinfo">Page <span class="currentPage">1</span> of {nrPages}</li>
<li class="prev"><a class="page-selector inactive" data-page="prev"><</a></li>
<v:iterator.for from="1" to="{nrPages}" iteration="i">
<f:if condition="{i.isFirst}">
<f:then><li><a class="page-selector inactive" data-page-nr="{i.index}" data-page="page{i.index}">{i.index}</a></li></f:then>
<f:else><li><a class="page-selector" data-page-nr="{i.index}" data-page="page{i.index}">{i.index}</a></li></f:else>
</f:if>
</v:iterator.for>
<li class="next"><a class="page-selector" data-page="next">></a></li>
</ul>
</f:if>
<!-- Paginations for each category -->
<f:if condition="{nrCatPages}">
<f:for each="{nrCatPages}" as="catpages">
<f:if condition="{catpages.nrPages}>1">
<ul class="pagination-cm category cat{catpages.catid}">
<li class="pageinfo">Page <span class="currentPage">1</span> of {catpages.nrPages}</li>
<li class="prev"><a class="page-selector inactive" data-page="prev"><</a></li>
<v:iterator.for from="1" to="{catpages.nrPages}" iteration="i">
<f:if condition="{i.isFirst}">
<f:then><li><a class="page-selector inactive" data-page-nr="{i.index}" data-page="cat{catpages.catid}page{i.index}">{i.index}</a></li></f:then>
<f:else><li><a class="page-selector" data-page-nr="{i.index}" data-page="cat{catpages.catid}page{i.index}">{i.index}</a></li></f:else>
</f:if>
</v:iterator.for>
<li class="next"><a class="page-selector" data-page="next">></a></li>
</ul>
</f:if>
</f:for>
</f:if>
</div>
JavaScript
最后，我只需要下面的 JavaScript，就可以使用同位素进行分页（所有 JS，无需重新加载页面！）：
jQuery(document).ready(function () {
/* Isotope Pagination */
var $container = jQuery('.portfolio');
// start by showing page 1 on page load
$container.isotope({
filter: '.page1'
});
/* when changing category, display correct pagination */
jQuery('.port-filter li a').click(function () {
jQuery('.pagination-cm').hide();
var pagination = jQuery(this).parent().attr("data-pagination");
jQuery('.pagination-cm.' + pagination).find("li.pageinfo > span.currentPage").text(1);
jQuery('.pagination-cm.' + pagination).show();
refreshPagination();
});
/* when pagination item is clicked, use isotope filter to show correct items */
jQuery('.portfolio-container').on('click', '.page-selector:not(.inactive)', function () {
var $pagination = jQuery(this).closest("ul");
var $currentPage = $pagination.find("li.pageinfo > span.currentPage");
var page = jQuery(this).attr("data-page");
var current = parseInt($currentPage.text());
var newPage = 1;
if (page == 'next') {
newPage = current + 1;
page = (($pagination.find("li:not(.next):not(.prev) .page-selector").attr("data-page")).slice(0, -1) + newPage);
}
else if (page == 'prev') {
newPage = current - 1;
page = (($pagination.find("li:not(.next):not(.prev) .page-selector").attr("data-page")).slice(0, -1) + newPage);
}
else {
newPage = jQuery(this).text();
}
$currentPage.text(newPage);
$container.isotope({
filter: '.' + page,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
},
layoutMode: 'fitRows'
});
refreshPagination();
return false;
});
/* refresh pagination display: disable current page button and prev/next buttons if necessary */
function refreshPagination() {
jQuery('.portfolio-container .pagination-cm:visible').each(function (index, value) {
var $pagination = jQuery(value);
var currentPage = parseInt($pagination.find("li.pageinfo > span.currentPage").text());
$pagination.find("a.page-selector").removeClass("inactive");
// Aktuelle Seite
$pagination.find("li a.page-selector[data-page-nr=" + currentPage + "]").addClass("inactive");
// Prev-Button
if (currentPage == 1) $pagination.find("li.prev a.page-selector").addClass("inactive");
else $pagination.find("li.prev a.page-selector").removeClass("inactive");
// Next-Button
var lastPage = $pagination.find("li:not(.next):last .page-selector").attr("data-page-nr");
if (currentPage < lastPage) $pagination.find("li.next a.page-selector").removeClass("inactive");
else $pagination.find("li.next a.page-selector").addClass("inactive");
});
}
});
就像我说的，这来自 TYPO3 上下文。我在基于 extbase 的自定义扩展中实现了这段代码。如果不进行调整，这些代码片段将无法移植到其他项目中，但我希望它们仍然会有所帮助。