Hidden Sort Control

This is an invisible sort control that sorts content on page load.

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

HTML Structure

Hidden sort control is defined by required data-jplist-control="hidden-sort" data attribute. The data-group attribute defines group of elements that should be sorted. 

<!-- hidden sort control -->
<div
    style="display: none"
    data-jplist-control="hidden-sort"
    data-group="group1"
    data-path=".title"
    data-order="asc"
    data-type="text">
</div>

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

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.

<!-- hidden sort control -->
<div
    style="display: none"
    data-jplist-control="hidden-sort"
    data-group="group1"

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

    data-path-1=".price"
    data-order-1="asc"
    data-type-1="number">
</div>

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

Data Attributes

The full list of control data attributes.

Name Description Values
data-jplist-control Defines hidden sort control. "hidden-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-path CSS selector that defines the HTML element that should be sorted any CSS selector or "default" keyword
data-order Specifies the sort order. "asc" or "desc"
data-type Specifies the type of content that should be sorted. "text" (default), "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}"