bra-pagination

A complex jQuery pagination and filter plugin

DEMO

How to use

Step 1 - Add markup

The bra-pagination markup is simple. First, start with a single list container, <ul class="sort-list"> in this example. Then, create <li class="items"> elements as much as you need. It is important to use this class because the pagination targets that class specifically. If you want another class name you must specify it in the options. Put your images and anything else you desire into each <li> and you are ready to rock.

<ul class="sort-list">
  <li class="items"></li>
  <li class="items"></li>
  <li class="items"></li>
</ul>

Step 2 - Init the plugin

$(function(){
  $('.sort-list').bra_pagination();
});

How to use the filter module

To filter items, you must add data- attributes to each of them. The plugin crawl through all items and append filter values automatically, sort by type, to the DOM. Available filter types are filter-pattern, filter-tab and filter-checkbox follow by the filter attribute. e.g. data-filter-pattern-color="blue" This item can be filtered by color blue.

<ul class="sort-list">
  <li class="items" data-filter-pattern-color="blue" data-filter-tab-qm="1" data-filter-tab-offer="1" data-filter-checkbox-size="XL"></li>
  <li class="items" data-filter-pattern-color="red"></li>
  <li class="items" data-filter-checkbox-size="L"></li>
</ul>

Available options

Listed below are all of the options available to customize the pagination and filter plugin to suite your needs, along with their default values.

OPTION	TYPE	DEFAULT	DESCRIPTION
namespace	String	'bra-'	Prefix string attached to the class of every element generated by the plugin
itemSelector	String	'.items'	Class-Selector: Items who should be used for the paging
itemsOnPage	Integer	9	Number of active items on every page
currentPage	Integer	1	Page to be started
controlsContainer	Object	null	jQuery Object whose contains the control navigation - example: $('.pagingContainer')
maxDisplayedButtons	Integer	3	Number of Buttons who should be shown - excluding minEndButtons!
minEndButtons	Integer	2	Number of Buttons at the begin and end of paging navigation who should be shown
firstLastButton	Boolean	true	Show first and last navigation buttons
prevText	String	'<'	Set the text for the "previous" directionNav item
nextText	String	'>'	Set the text for the "next" directionNav item
firstText	String	'<<'	Set the text for the "go to first" directionNav item
lastText	String	'>>'	Set the text for the "go to last" directionNav item
ellipseText	String	'…'	Set the text for the "placeholder" direction items
filter	Boolean	false	Set to true if items should be filtered
filterContainer	Object	null	jQuery Object whose contains the filter modules - example: $('.filterContainer')
filterWrapperSelector	String	'.filter-wrapper'	Class-Selector name who be used for each filter wrapper
filterResetButtons	String	'.filter-reset'	Class-Selector name for reset button
filterResetText	String	'Filter zurücksetzen'	Set text for the filter reset button
showAttributeCount	Boolean	false	Displays the number of filtered items
search	Boolean	false	Set to true if items could be searched
searchSelector	String	'#bra-input-search'	Selector for the search input field
onInit	Function	Optional	Callback triggered immediately after initialization
onFilter	Function	Optional	Callback triggered after filter toggle
onFilterReset	Function	Optional	Callback triggered after filter reset
onUpdate	Function	Optional	Callback triggered after update

Available methods

prevPage

Selects the previous page.

$([selector]).bra_pagination('prevPage');

==============

nextPage

Selects the next page

$([selector]).bra_pagination('prevPage');

==============

addItem

Adding new Item to pagination object. (useful after you have add an item to pagination list).

$([selector]).bra_pagination('addItem');

==============

updateItemsOnPage

Allows to dynamically change how many items are rendered on each page

$([selector]).bra_pagination('updateItemsOnPage', 20);

==============

update

The pagination is drawn again using the existing settings. (useful after you have destroyed a paginationfor example). Methode is also used by the search function

$([selector]).bra_pagination('update');

==============

destroy

Visually destroys the pagination, any existing settings are kept

$([selector]).bra_pagination('destroy');

==============

getPagesCount

Returns the total number of pages.

$([selector]).bra_pagination('getPagesCount');

==============

getCurrentPage

Returns the current page number.

$([selector]).bra_pagination('getCurrentPage');

==============

setPage

Set page number to start from.

$([selector]).bra_pagination('setPage', 6);

==============

filterReset

Restore all filter settings

$([selector]).bra_pagination('filterReset');

==============

filterToggle

Activate or deactivate items by given filter options ([data attribute name], [data value])

$([selector]).bra_pagination('filterToggle', 'filter-pattern-color', 'blue');

==============

sortItems

Sorts the elements according to given parameters. Alphabetic or numeric, and either ascending or descending. Must be an array with two values! ([ [sort property], [sorting] ])

$([selector]).bra_pagination('sortItems', ['price', 'asc']);

Available sort properties:

PROPERTY	EXAMPLE	DESCRIPTION
text	text	sort items by text
[data-attribute-name]	'price'	sort items by data-attribute 'price'
.class	'.item'	sort items by class name - must start with '.'

Available sort order properties:

PROPERTY	DESCRIPTION
asc	sort ascending
desc	sort descending
==============