Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

Counter Control Settings

Counter Control

Common HTML Settings:

Data Attribute Description Values Example
data-type path - count items by their jQuery path
text - count items by free text in the given jQuery path
range - count range of items in the given jQuery path
"path", "text" and "range" data-type="path"
data-mode filter - refresh count on every filter action;
static - init count on page load only once
all - refresh count on every jplist action
"static", "filter" and "all" data-mode="filter"
data-format the structure of the count element some text with {count} placeholder data-format="({count})"

HTML Settings for Path Data Type:

Data Attribute Description Values Example
data-path jQuery path to the items jQuery path data-path=".title"

HTML Settings for Text Data Type:

Data Attribute Description Values Example
data-path jQuery path to the items jQuery path data-path=".title"
data-text this value is optinal; If it exists the control counts items by text (data-text attribute) in the given path (data-path attribute), otherwise it counts by jQuery path only (data-path attribute) jQuery pathtext value data-text="text..."

HTML Settings for Range Data Type:

Data Attribute Description Values Example
data-path jQuery path to the items jQuery path data-path=".title"
data-min range min value numeric value data-min="10"
data-max range max value numeric value data-max="100"

General Settings:

Data Attribute Description Values Example
data-control-type="counter" panel control type definition 'counter' data-control-type="counter"
data-control-name="name" panel control name. It should be the same in the top and bottom panels string value data-control-name="lifestyle-counter"
data-control-action="counter" panel control action definition 'counter' data-control-action="counter"
data-control-storage="false" exclude control from storage (when cookies/localstorage is enabled) 'true' ot 'false' data-control-storage="false"
data-control-deep-link="false" exclude control from deep link (when deep linking is enabled) 'true' ot 'false' data-control-deep-link="false"
data-control-animation="false" exclude control from animation effects 'true' ot 'false' data-control-animation="false"
data-control-animate-to-top="false" perform "animate to top" effect for the given control; as a rule, used in bottom panel 'true' ot 'false' data-control-animate-to-top="false"