README

tl;dr

在 SilverStripe 中通过三个简单步骤启用 AJAX 分页！

步骤 1: 将你的 DataList 包裹在列表装饰器中

 $pages = new AjaxPaginatedList(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 的）也非常简单 - 你将获得一个更多按钮，页面将添加到末尾，而不是替换！

可能还会有更多内容；（-）如果你有适合小部件的想法，请告诉我！

维护者

Mateusz Uzdowski

要求

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

变更日志

0.2

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

0.1

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

安装

将以下行添加到你的 composer.json 并运行 composer update

"mateusz/frontend": "*"

注意，包名最近已从 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')
});

常见问题解答

目前尚无。

开发笔记

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

mateusz / frontend

维护者

详情