Checkbox Sort Control

Checkbox sort controls are used to sorts content located at the specified CSS selector paths.

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

HTML Structure

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

<!-- 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 -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-sort"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        checked />
    Sort by title asc
</label>

<!-- 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

Checkbox sort controls can be placed in both top and bottom panels for the better user experience. In this case data-name attribute should be the same within all controls in top and bottom panels:

<!-- TOP PANEL CONTROLS -->
<!-- sort by title ASC -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-sort"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        checked />
    Sort by title asc
</label>

<!-- 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 -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-sort"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        checked />
    Sort by title asc
</label>

Jump to top

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

<!-- sort by title ASC -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-sort"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-jump="top" />
    Sort by title asc
</label>

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.

<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-sort"
        data-group="group1"
        data-jump="top"

        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
</label>

<!-- 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 -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-sort"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-id="titleasc"
        checked />
    Sort by title asc
</label>

<!-- 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 -->
<label>
    <input
        type="checkbox"
        data-jplist-control="checkbox-sort"
        data-path=".title"
        data-group="group1"
        data-order="asc"
        data-type="text"
        data-id="titleasc"
        checked />
    Sort by title asc
</label>

<!-- 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 radio buttons sort control.	"checkbox-sort"
`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 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-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-jump`	This data attribute can be used to scroll page to the specified location when user changes a checkbox value. 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