Sort Buttons Control

This control works like checkbox or radio button but has a regular button layout. It's used to sort content located at the specified CSS selector path.

See the Pen jPList Sort Buttons Control by 1rosehip (@1rosehip) on CodePen.

HTML Structure

Sort control is defined by required data-jplist-control="sort-buttons" data attribute. The data-group attribute defines group of elements that should be sorted. The full list of data attributes can be found here.

Radio buttons mode

In radio mode all buttons should have the same name or data-name attribute. Also data-mode attribute should be radio.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- sort by title ASC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-name="sort1"
        data-selected="true"
        data-mode="radio">
    Sort by title asc
</button>

<!-- sort by title DESC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="desc"
        data-type="text"
        data-name="sort1"
        data-mode="radio">
    Sort by title desc
</button>

<!-- content to sort -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Checkboxes mode

In checkbox mode all buttons should have data-mode="checkbox" attribute.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- sort by title ASC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-selected="true"
        data-mode="checkbox">
    Sort by title asc
</button>

<!-- sort by title DESC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="desc"
        data-type="text"
        data-mode="checkbox">
    Sort by title desc
</button>

<!-- content to sort -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Top and bottom panels

Sort button controls can be placed in both top and bottom panels for the better user experience. In this case data-name attribute with the same value should be added to all controls. All other data attributes should also have the same values:

<!-- TOP PANEL CONTROLS -->
<!-- sort by title ASC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-selected="true"
        data-mode="checkbox">
    Sort by title asc
</button>

<!-- sort by title DESC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="desc"
        data-type="text"
        data-mode="checkbox">
    Sort by title desc
</button>

<!-- content to sort -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- BOTTOM PANEL CONTROLS -->
<!-- sort by title ASC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-selected="true"
        data-mode="checkbox">
    Sort by title asc
</button>

<!-- sort by title DESC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="desc"
        data-type="text"
        data-mode="checkbox">
    Sort by title desc
</button>

Jump to top

data-jump data attribute can be used to scroll page to the specified location when user clicks a button. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.

<button
       data-jplist-control="sort-buttons"
       data-path=".title"
       data-group="group1"
       data-order="asc"
       data-type="text"
       data-jump="top"
       data-mode="checkbox">
    Sort by title asc
</button>

Double / Multiple Sorting

Double sorting can be achieved with additional set of data-path-1, data-order-1 and data-type-1 attributes. There can be any number of such sets, for example (data-path-2, data-order-2, data-type-2), (data-path-3, data-order-3, data-type-3), ... etc.

<!-- Sort by title ASC and by price DESC -->
<button
        data-jplist-control="sort-buttons"
        data-group="group1"
        data-name="sort1"
        data-selected="true"
        data-mode="radio"

        data-path=".title"
        data-order="asc"
        data-type="text"

        data-path-1=".price"
        data-order-1="desc"
        data-type-1="number">
    Sort by title ASC and by price DESC
</button>

<!-- content to sort -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        <div class="price">12</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        <div class="price">45</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        <div class="price">10</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Deep Linking

Deep links can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and deepLinking setting should be true in jPList parameters.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- sort by title ASC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-selected="true"
        data-id="titleasc"
        data-mode="checkbox">
    Sort by title asc
</button>

<!-- sort by title DESC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="desc"
        data-type="text"
        data-id="titledesc"
        data-mode="checkbox">
    Sort by title desc
</button>

<!-- content to sort -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        deepLinking: true
    });
</script>

Storage

Local storage, session storage or cookies can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and storage setting should be passed to jPList constructor.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- sort by title ASC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-selected="true"
        data-id="titleasc"
        data-mode="checkbox">
    Sort by title asc
</button>

<!-- sort by title DESC -->
<button
        data-jplist-control="sort-buttons"
        data-path=".title"
        data-group="group1"
        data-order="desc"
        data-type="text"
        data-id="titledesc"
        data-mode="checkbox">
    Sort by title desc
</button>

<!-- content to sort -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        storage: 'localStorage', //'localStorage', 'sessionStorage' or 'cookies'
        storageName: 'jplist'
    });
</script>

Data Attributes

The full list of control data attributes.

Name	Description	Values
`data-jplist-control`	Defines sort button control.	"sort-buttons"
`data-group`	Defines group of items that should be sorted. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute.	any text value
`data-name`	The data-name attribute is used to identify the group of sort buttons in radio mode or the same controls in different panels. Different controls should have different data-name attributes. By default, data-name attribute has default value.	any text value
`data-mode`	Defines sort buttons behaviour.	"radio" (the default) or "checkbox"
`data-path`	CSS selector that defines the HTML element that should be sorted	"default" keyword for the initial value or any CSS selector
`data-order`	Specifies the sort order.	"asc" or "desc"
`data-type`	Specifies the type of content that should be sorted.	"text", "number" or "datetime"
`data-datetime-format`	This attribute is used when `data-type="datetime"`. It defines the structure of the date using following wildcards: {year}, {month}, {day}, {hour}, {min}, {sec}.	Date structure, for example: `data-datetime-format="{month} {day}, {year}"`
`data-selected`	Specifies if the button should be selected on page load.	"true" or "false"
`data-jump`	This data attribute can be used to scroll page to the specified location when user clicks a button. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.	top keyword or any CSS selector
`data-id`	This attribute is used for deep linking.	any text value that may contain letters, digits, underscores or dashes