README

此模块最初由Mateusz Udowski于2012年为SilverStripe 3开发。此分支已稍作修改，以使用SilverStripe 4进行命名空间设置。尽管如此，它仍保留了所有旧的jQuery功能 :-\

长话短说

在SilverStripe中启用AJAX分页只需三个简单步骤！

步骤 1：将您的 DataList 包裹在一个列表装饰器中

 $pages = AjaxPaginatedList::create(Page::get(), $this->request);

步骤 2a：将分页元数据标记添加到您的模板中
```
 <div class='pagination" $Pages.PaginationMetadata(2)>
```
步骤 2b：在模板中准备目标页面内容区域
```
 <div class='pagination-content'></div>
```

步骤 3：应用小部件（假设已满足JavaScript库的要求）

 $('div.pagination').sspagination({contentSelector: '.pagination-content'});

此外，应用无限滚动式分页（如Google图片或Twitter）同样简单 - 而不是页面列表，您将获得一个“更多”按钮，页面将在末尾附加，而不是替换！

还有更多内容即将到来 ;-) 如果您有适合小部件的想法，请告诉我！

维护者

Russell Michell

要求

SilverStripe 4
jQuery
jQuery UI
underscore.js（包含 javascript/underscore.js）
lib.js（包含 framework/admin/javascript/lib.js）

变更日志

1.0

SilverStripe 4 支持

0.2

3.1 支持。
为AJAX获取添加PJAX支持。
在AJAX HTTP失败时重定向到错误页面。
与document.location集成 - 添加pushState支持。
修复缺失lib.js的异常。
添加了 docs/sspagination-how-to.md。

0.1

首次发布，包括sspagination和ssendless小部件。

安装

#> composer require phptek/silverstripe-ajaxpaginatedlist

注意，包名最近已从 silverstripe/frontend 更改为，但两个名称都应该仍然有效。前一个名称更适合未来兼容性。

功能

提供了一个 sspagination jQuery UI小部件，它作为常规分页的嵌入式替代品。
提供了一个 ssendless jQuery UI小部件，它添加了Twitter风格的滚动分页。

组件

sspagination (jquery.ss.pagination.js)

该小部件完全用JS分页替换了指定的PHP驱动的分页控件。原始标记被隐藏且不再使用，并使用内部underscore模板。DOM元素上提供多种类，可用于自定义。还提供了一些钩子。

关于AJAX/PJAX的说明

默认情况下，小部件使用“穷人式的PJAX” - 这意味着它通过AJAX获取整个页面，然后使用jQuery仅获取需要替换的元素。这种情况完美适用于两种情况

快速任务，不需要修改大量PHP代码。
使用静态发布者获取预渲染的HTML内容。

对于动态场景的缺点是我们正在渲染整个页面，这比调用整个堆栈要慢。

如果对速度（或服务器负载）有顾虑，则很容易启用PJAX获取。PJAX将确保仅渲染和通过JSON传输所需的片段。有关详细信息，请参阅PJAX how-to。

引入要求

此小部件运行需要jQuery和jQuery UI。此模块不提供这些库，通常您会希望选择自己的jQuery版本，因此加载这些库由您自行决定。然而，另外两个要求由框架和模块提供，因此您可以只需复制粘贴即可。

以下是通过您的Controller中的Requirements API实现此操作的示例

public function init() {
	parent::init();

	// First, load jQuery - don't forget to update the paths!
	Requirements::javascript('<your-script-path>/jquery-2.0.0.js');
	Requirements::javascript('<your-script-path>//jquery-ui-1.10.3.custom.js');

	// Second, load scripts for this module - order os important.
	Requirements::javascript('framework/admin/javascript/lib.js');
	Requirements::javascript('frontend/javascript/underscore.js');
	Requirements::javascript('frontend/javascript/jquery.ss.pagination.js');
	Requirements::javascript('frontend/javascript/jquery.ss.endless.js'); // choose one or both.

	// Finally, pull in your custom code.
	Requirements::javascript('<your-script-path>/your-script.js');
}

包含分页元数据

此小部件依赖于在创建时提供的分页元数据。这可以通过正常的jQuery UI选项机制完成，但最简单的方法是使用AjaPaginatedList作为DataList的包装器。

public function Pages() {
	return new AjaxPaginatedList(Page::get(), $this->request);
}

这为您提供了一个API调用，用于生成包含分页元数据的HTML5数据属性，该属性可以由小部件自动获取。在模板方面，将其添加到包含静态分页控件的元素中。可选属性与PaginationSummary相同 - 它指定了围绕当前页要显示的上下文数量。

<div class="pagination" $Pages.PaginationMetadata(2)>
	// Static pagination follows.
</div>

静态分页标记的结构无关紧要。小部件将完全使用自己的分页格式替换它，基于通过Pages.PaginationMetadata提供的数据属性（格式可以更改 - 请参阅下方的“模板自定义”）。静态分页作为非JS启用客户端的备用机制。

更多用法示例可以在sspagination how-to中找到。

应用和配置小部件

通过至少指定contentSelector选项在前端应用小部件。这是一个选择器，将用于查找要替换的内容元素，以及通过常规AJAX调用接收的相关内容。还要指定将在页面加载时自动显示的加载指示器（指示器）。您应该自己添加此指示器元素，并使用CSS将其隐藏，以免JS损坏/禁用时出现。

$('div.pagination').sspagination({
	contentSelector: '.pagination-content',
	indicatorElement: $('.pagination-indicator')
});

动态分页现在应该正在运行。

您可以使用jQuery UI的常规方式在小部件上调用函数

// This will invoke the page fetch, and refresh the pagination control.
$('div.pagination').sspagination('setCurrentPage', 2);

// Hook into the sspagination events.
$('div.pagination').bind('sspaginationafterpagefetch', function(event) {
	// Do processing.
});

// This uses the item number instead (as opposed to the page), which is how the backend handles the pagination.
$('div.pagination').sspagination({pageStart: 2});

// You can also dynamically change page size and the widget will refresh itself accordingly (this does not invoke a fetch).
$('div.pagination').sspagination({pageLength: 1});

// Destroy the widget and revert to static navigation.
$('div.pagination').sspagination('destroy');

模板自定义

小部件DOM由参数化的underscore.js模板构建而成。您可以重新定义它们以获得自定义布局。需要注意的是，您不能仅使用jQuery小部件API更新一个模板 - 整个对象将被替换，因此请确保提供了所有模板。您可以在初始化时或以后自定义它们。

	$('div.pagination').sspagination({
		templates: {
			// All templates need to be provided here
			// ...
		}
	});

如果您只想更新单个模板，可以通过这种方式提取选项以避免冗长

	// Extract the templates
	var templates = $('div.pagination').sspagination('option', 'templates');
	// Update just one.
	templates.main = '<div class="extra-div"><ul class="ss-pagination"><%= inside %></ul></div>';
	// You need to reset it to trigger a refresh, otherwise the template will not update immediately.
	$('div.pagination').sspagination({templates: templates});

要查看小部件的所有可用模板及其默认值，请查看相关源文件的开头。更多关于与underscore模板一起使用的信息，请参阅underscore文档。

选项

contentSelector
pageStart
pageLength
totalItems
getParam
context
indicatorElement

方法

getTotalPages
getCurrentPage
setCurrentPage
destroy

事件

beforepagefetch：在AJAX调用之前。返回false以防止获取。
afterpagefetch：在成功获取和刷新（即相关afterrefresh）之后。
beforerefresh：在更新小部件之前（删除并重新创建以适应当前选项）。返回false以防止刷新。
afterrefresh：在更新小部件之后。
ontransition：在即将操纵分页内容元素之前调用。返回false以防止默认行为。

ssendless (jquery.ss.endless.js)

此小部件扩展了sspagination（必须包含这两个js文件）。它用无限滚动行为替换了经典的跳转到页面的分页方式。它不会移除显示的页面内容，而是将连续的页面附加到末尾，如果没有更多要显示的页面，则将其自身移除。

使用此小部件动态更改选项的行为未指定 - 即它应该在创建时预先配置。

小部件的使用方式类似于sspagination。

$('div.pagination').ssendless({
	contentSelector: '.pagination-content',
	indicatorElement: $('.pagination-indicator')
});

常见问题解答

目前还没有。

开发笔记

模板参数化目前仅在创建时工作。这是因为设置深层嵌套的选项会替换现有结构。

phptek / silverstripe-ajaxpaginatedlist

维护者

详细信息