FastPaginate snippet

Parameters

Name	Default	Description
className	modResource	The name of the class (default is modResource).
fields	*	A comma-separated list of fields to retrieve; * retrieves all fields.
where	[]	An array of conditions to filter the results.
limit	10	The maximum number of records to return.
offset	0	The number of records to skip before starting to return results.
sortby	id	The field by which to sort the results (default is id).
sortdir	asc	The direction of sorting; can be asc for ascending or desc for descending.
wrapper	#fastpaginate	The wrapper selector used to encapsulate the output (default is #fastpaginate).
outputSeparator	\n	The string used to separate output items (default is a newline).
toPlaceholder		If specified, the result will be output to a placeholder instead of being returned directly.
tpl		The chunk used to format each item in the output.
---	---	---
url_mode	get	Determines how the URL is formed. It can have three options: none (no link is generated), get (URL parameters are added), and url (a standard URL is formed).
path_separator	;	The character used to separate segments in the URL path (default is ;).
page_name	page	The name of the URL parameter that represents the page number (default is page).
sort_name	sort	The name of the URL parameter used for sorting (default is sort).
cache	false	Indicates whether to enable caching of results (true or false).
cacheTime	3600	The duration (in seconds) for which the cache is valid (default is 3600 seconds, or 1 hour).
---	---	---
show.loadmore	0	A flag indicating whether to show the "Load More" button (1 for yes, 0 for no).
pls.loadmore	pls.loadmore	The placeholder string used for the "Load More" button text.
tpl.loadmore	fp.btn.loadmore	The chunk used to format the "Load More" button.
classes.loadmore		Additional CSS classes to apply to the "Load More" button for styling.
---	---	---
show.pagination	1	A flag indicating whether to display pagination controls (1 for yes, 0 for no).
pls.pagination	pls.pagination	The placeholder string used for the pagination text.
tpl.pagination	fp.pagination	The chunk used to format the pagination controls.
tpl.pagination.direction	fp.pagination.direction	The chunk used to format the pagination direction controls (e.g., previous/next).
tpl.pagination.link	fp.pagination.link	The chunk used to format individual pagination links.
---	---	---
pls.total	pls.total	The placeholder string used to display the total number of items.

Classes

Selector	Description
.fp-items	Wrapper for displaying the results.
.fp-sort	Element for sorting the results.
.fp-filters	Container for filtering options.
.fp-filters.fp-filters-change	Applies filtering immediately upon input change .
.fp-loadmore	Wrapper for the "Load More" button.
.fp-pagination	Wrapper for pagination controls.
.fp-loading	Adds a loading class to the wrapper while data is being fetched.

Example

Output of resources:

{'!FastPaginate'|snippet: [
   'where' => [
        'published' => 1,
        'parent' => 2,
    ],
    'tpl' => 'tpl.resource',     
]}

tpl.resource

[[+id]]. [[+pagetitle]]

Output of PageBlocks table

{'!FastPaginate'|snippet: [
    'className' => 'pbTableValue',
    // Output only the necessary fields
    'fields' => 'id,pagetitle,price,categories,brand,size,color,rating',
    'tpl' => 'card',
    'limit' => 16,
    'show.loadmore' => 1, // Show the "Load More" button
	'show.pagination' => 1, // Show pagination
	'toPlaceholder' => 'pls.fastpaginate',
    'where' => [
        'published' => 1,
        'collection_id' => 1,
    ],
]}

<section class="section" id="fastpaginate">
	<div class="container">
		<div class="fp-header d-flex ai-center jc-between">
			<div class="fp-info">
				<span>
					<b>Total:</b> 
					<span class="fp-total">
                        {'pls.total'|placeholder|number : 0 : '.' : ' '}
                    </span>
				</span>
				<div class="fp-tags"></div>
			</div>
			<div class="custom-select-wrapper">
                <!-- SORT -->
				<select name="sort" class="fp-sort custom-select">
					<option value="id-asc" selected>Oldest first</option>
					<option value="id-desc">Newest first</option>
					<option value="price-asc">From cheap to expensive</option>
					<option value="price-desc">From expensive to cheap</option>
				</select>
			</div>
		</div>
		<div class="fp-filter d-flex flex-column">
			<!-- Filters. Created manually. -->
			{insert 'file:chunks/fp.filters.tpl'}
		</div>
		<div class="fp-content d-flex flex-column">
			<!-- RESULTS -->
			<div class="fp-items d-flex">
				{'pls.fastpaginate'|placeholder}
			</div>
			<!-- Load More button -->
			<div class="fp-loadmore d-flex js-center">
                {'pls.loadmore'|placeholder}
			</div>
			<!-- Pagination -->
            <div class="fp-pagination">
                {'pls.pagination'|placeholder}
            </div>
		</div>
	</div>
</section>