PHPackages mateusz/frontend - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. mateusz/frontend ActiveSilverstripe-module[Utility & Helpers](/categories/utility) mateusz/frontend ================ Provides frontend widgets that nicely integrate with a SilverStripe site. 0.3(12y ago)143.0k6[6 issues](https://github.com/mateusz/silverstripe-frontend/issues)[6 PRs](https://github.com/mateusz/silverstripe-frontend/pulls)1BSD-3-ClauseJavaScript Since Dec 17Pushed 9y ago3 watchersCompare [ Source](https://github.com/mateusz/silverstripe-frontend)[ Packagist](https://packagist.org/packages/mateusz/frontend)[ RSS](/packages/mateusz-frontend/feed)WikiDiscussions master Synced 3w ago READMEChangelog (1)Dependencies (1)Versions (4)Used By (1) SilverStripe frontend ===================== [](#silverstripe-frontend) tl;dr ----- [](#tldr) Enable AJAX pagination in SilverStripe in three easy steps! - Step 1: wrap your `DataList` with a list decorator: ``` $pages = new AjaxPaginatedList(Page::get(), $this->request); ``` - Step 2a: add pagination metadata markup into your template: ``` request); } ``` This provides you with an API call to generate HTML5 data attributes containing the pagination metadata that the widget can automatically pick up. On the template side add it to the element containing the [static pagination control](http://doc.silverstripe.org/framework/en/howto/pagination). The optional attribute is the same as for the `PaginationSummary` - it specifies the amount of context to be shown around current page. ``` // Static pagination follows. ``` It doesn't matter what is the structure of the static pagination markup. The widget will completely replace it using it's own format for the pagination, based on the data attributes provided via the `Pages.PaginationMetadata` (the format can be changed - see "Template customisation" below). The static pagination is included as a fallback mechanism for non JS enabled clients. A more comprehensive example of usage can be found in the [sspagination how-to](docs/sspagination-how-to.md). ### Applying and configuring the widget [](#applying-and-configuring-the-widget) Apply the widget on the frontend by at minimum specifying the `contentSelector` option. This is a selector that will be used to find the content element to replace, and also to find the relevant piece of the content received via a regular AJAX call. Also specify the spinner (an indicator) that will automatically be shown when the pages are loading. You should add this indicator element yourself, and hide it with CSS, so it doesn't appear if JS is broken/disabled. ``` $('div.pagination').sspagination({ contentSelector: '.pagination-content', indicatorElement: $('.pagination-indicator') }); ``` The dynamic pagination should now be running. You can invoke functions on the widget in the usual jQuery UI way: ``` // 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'); ``` ### Template customisation [](#template-customisation) The widget DOM is built up from parametrised underscore.js templates. You can redefine them to get a custom layout. One thing to keep in mind is that you can't update just one template using the jQuery widget API - the whole object will get replaced, so make sure all templates are provided. You can customise them on initialisation, or later: ``` $('div.pagination').sspagination({ templates: { // All templates need to be provided here // ... } }); ``` A way to get around the verbosity if you want to update just a single template is to extract the option out like this: ``` // Extract the templates var templates = $('div.pagination').sspagination('option', 'templates'); // Update just one. templates.main = ''; // You need to reset it to trigger a refresh, otherwise the template will not update immediately. $('div.pagination').sspagination({templates: templates}); ``` To see all available templates for a widget and their default values, have a look at the top of the relevant source file. More information on working with underscore templates can be found in [underscore docs](http://underscorejs.org/#template). ### Options [](#options) - `contentSelector` - `pageStart` - `pageLength` - `totalItems` - `getParam` - `context` - `indicatorElement` ### Methods [](#methods) - `getTotalPages` - `getCurrentPage` - `setCurrentPage` - `destroy` ### Events [](#events) - `beforepagefetch`: before the AJAX call is made. Return false to prevent fetching. - `afterpagefetch`: after a successful fetch & refresh (i.e. after the relevant afterrefresh) - `beforerefresh`: before the widget is updated (removed and recreated to fit with the current options). Return false to prevent refreshing. - `afterrefresh`: after the widget has been updated. - `ontransition`: called just before the pagination-content element is about to be manipulated. Return false to prevent default behaviour. ssendless (jquery.ss.endless.js) -------------------------------- [](#ssendless-jqueryssendlessjs) This widget extends the sspagination (both js files have to be included). It replaces the classical, skip-to-page, pagination with a endless rollout behaviour. Instead of removing the displayed page content it appends the consecutive page at the end, and removes itself from the way if there is no more pages to be displayed. The behaviour of dynamic changes to options is unspecified with this widget - i.e. it should be preconfigured on creation. The widget usage is similar to sspagination: ``` $('div.pagination').ssendless({ contentSelector: '.pagination-content', indicatorElement: $('.pagination-indicator') }); ``` FAQ === [](#faq) Nothing yet. Dev notes ========= [](#dev-notes) - template parametrisation currently works on creation only. This is because setting deeply nested options replaces the exisiting structures. ### Health Score 29 — LowBetter than 57% of packages Maintenance11 Infrequent updates — may be unmaintained Popularity27 Limited adoption so far Community14 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~126 days Total 3 Last Release 4684d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/118653?v=4)[Mateusz U](/maintainers/mateusz)[@mateusz](https://github.com/mateusz) --- Top Contributors [![mateusz](https://avatars.githubusercontent.com/u/118653?v=4)](https://github.com/mateusz "mateusz (31 commits)") --- Tags silverstripewidgetsfrontend ### Embed Badge ![Health badge](/badges/mateusz-frontend/health.svg) ``` [![Health](https://phpackages.com/badges/mateusz-frontend/health.svg)](https://phpackages.com/packages/mateusz-frontend) ``` ### Alternatives [silverstripe/userforms UserForms enables CMS users to create dynamic forms via a drag and drop interface and without getting involved in any PHP code 1321.1M83](/packages/silverstripe-userforms)[symbiote/silverstripe-gridfieldextensions A collection of useful grid field components 951.9M264](/packages/symbiote-silverstripe-gridfieldextensions)[silverstripe/widgets Widgets are small pieces of functionality such as showing the latest Comments or Flickr Photos. They normally display on the sidebar of your website. 37418.6k20](/packages/silverstripe-widgets)[silverstripe/tagfield Tag field for SilverStripe 561.3M50](/packages/silverstripe-tagfield)[jonom/silverstripe-betternavigator Front-end utility menu for Silverstripe websites featuring administration and development tools 59429.0k12](/packages/jonom-silverstripe-betternavigator)[sheadawson/silverstripe-blocks An alternative to the SilverStripe Widgets module. 5955.5k5](/packages/sheadawson-silverstripe-blocks) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)