Fork me on GitHub

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

Sort Buttons Control Settings

Sort Buttons Control

Control Settings:

Data Attribute Description Values Example
data-mode In single mode only one button can be selected at the same time "single" or "" data-mode="single"
data-selected Default value on page load. This attribute should be the same in all panels. "true" if button is selected, otherwise false. "true" or "false" data-selected="true"
data-path jQuery path to the items jQuery path or "default" for the default/initial sorting data-path=".title"
data-path="default"
data-order ascending or descending sorting "asc" or "desc" data-order="asc"
data-order="desc"
data-type sort data type "text", "number" or "datetime" data-type="text"
data-datetime-format datetime format (This attribute belongs to 'div') The following wilcards could be used: {year}, {month}, {day}, {hour}, {min}, {sec}. data-datetime-format="{month}/{day}/{year}"
data-ignore regular expression which allows remove characters before sorting (for example, spaces, dashes etc.) regular expression data-ignore="[^a-zA-Z0-9]+"

General Settings:

Data Attribute Description Values Example
data-control-type="sort-buttons-group" panel control type definition 'sort-buttons-group' data-control-type="sort-buttons-group"
data-control-name="name" panel control name. It should be the same in the top and bottom panels string value data-control-name="sort-buttons-group-1"
data-control-action="sort" panel control action definition 'sort' data-control-action="sort"
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"