Dropdown Sort Control

This is a dropdown control with custom styles that sorts content by the specified CSS selector.

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

HTML Structure

Dropdown sort control is defined by required data-jplist-control="dropdown-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 dropdown control -->
<div
    data-jplist-control="dropdown-sort"
    class="jplist-dd"
    data-group="group1"
    data-name="sorttitle">

    <div data-type="panel" class="jplist-dd-panel">Sort by</div>
    <div data-type="content" class="jplist-dd-content">

        <div
                class="jplist-dd-item"
                data-path="default">Sort by</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="asc"
                data-type="text"
                data-selected="true">Title A-Z</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</div>
    </div>
</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>

Top and bottom panels

Dropdown control 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. All other data attributes should also have the same values: 

<!-- sort dropdown control in the top panel -->
<div
    data-jplist-control="dropdown-sort"
    class="jplist-dd"
    data-group="group1"
    data-name="sort-by-title">

    <div data-type="panel" class="jplist-dd-panel">Sort by</div>
    <div data-type="content" class="jplist-dd-content">

        <div
                class="jplist-dd-item"
                data-path="default">Sort by</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="asc"
                data-type="text"
                data-selected="true">Title A-Z</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</div>
    </div>
</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>

<!-- sort dropdown control in the bottom panel -->
<div
    data-jplist-control="dropdown-sort"
    class="jplist-dd"
    data-group="group1"
    data-name="sort-by-title">

    <div data-type="panel" class="jplist-dd-panel">Sort by</div>
    <div data-type="content" class="jplist-dd-content">

        <div
                class="jplist-dd-item"
                data-path="default">Sort by</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="asc"
                data-type="text"
                data-selected="true">Title A-Z</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</div>
    </div>
</div>

Bootstrap dropdown example

The following example demonstrates how to use jPList control with bootstrap framework:

<div class="dropdown mr-3"
       data-jplist-control="dropdown-sort"
       data-opened-class="show"
       data-group="group1"
       data-name="sort1">
    
    <button
            data-type="panel"
            class="btn btn-primary dropdown-toggle"
            type="button">
        Sort by
    </button>
    
    <div
            data-type="content"
            class="dropdown-menu"
            aria-labelledby="dropdownMenuButton">
    
        <a class="dropdown-item"
           href="#"
           data-path="default">Sort By</a>
    
        <a class="dropdown-item"
           href="#"
           data-path=".title"
           data-order="asc"
           data-type="text">Title A-Z</a>
    
        <a class="dropdown-item"
           href="#"
           data-path=".title"
           data-order="desc"
           data-type="text">Title Z-A</a>
    </div>
</div>

Jump to top

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

<div
    data-jplist-control="dropdown-sort"
    class="jplist-dd"
    data-group="group1"
    data-jump="top"
    data-name="sorttitle">

    <div data-type="panel" class="jplist-dd-panel">Sort by</div>
    <div data-type="content" class="jplist-dd-content">

        <div
                class="jplist-dd-item"
                data-path="default">Sort by</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="asc"
                data-type="text"
                data-selected="true">Title A-Z</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</div>
    </div>
</div>

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.

<div
    data-jplist-control="dropdown-sort"
    class="jplist-dd"
    data-group="group1"
    data-name="sorttitle">

    <div data-type="panel" class="jplist-dd-panel">Sort by</div>
    <div data-type="content" class="jplist-dd-content">

        <div
                class="jplist-dd-item"
                data-path="default">Sort by</div>

        <div
                class="jplist-dd-item"

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

                data-path-1=".price"
                data-order-1="asc"
                data-type-1="number"

                data-selected="true">Title ASC and Price ASC</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="desc"
                data-type="text"

                data-path-1=".price"
                data-order-1="desc"
                data-type-1="number">Title DESC and Price DESC</div>
    </div>
</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>

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, deepLinking setting should be true in jPList parameters and data-value should be added to each option.

In the example below deep link may look like http://www.example.com/page#group=group1&sorttitle=1 where group1 is taken from data-jplist-group="group1" and 1 is data-value attribute of the selected option.

<!-- 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 dropdown control -->
<div
    data-jplist-control="dropdown-sort"
    class="jplist-dd"
    data-group="group1"
    data-id="sorttitle"
    data-name="sorttitle">

    <div data-type="panel" class="jplist-dd-panel">Sort by</div>
    <div data-type="content" class="jplist-dd-content">

        <div
                class="jplist-dd-item"
                data-path="default">Sort by</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="asc"
                data-type="text"
                data-value="1"
                data-selected="true">Title A-Z</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="desc"
                data-type="text"
                data-value="2">Title Z-A</div>
    </div>
</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({
        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, storage setting should be passed to jPList constructor and data-value should be added to each option.

<!-- 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 dropdown control -->
<div
    data-jplist-control="dropdown-sort"
    class="jplist-dd"
    data-group="group1"
    data-id="sorttitle"
    data-name="sorttitle">

    <div data-type="panel" class="jplist-dd-panel">Sort by</div>
    <div data-type="content" class="jplist-dd-content">

        <div
                class="jplist-dd-item"
                data-path="default">Sort by</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="asc"
                data-type="text"
                data-value="1"
                data-selected="true">Title A-Z</div>

        <div
                class="jplist-dd-item"
                data-path=".title"
                data-order="desc"
                data-type="text"
                data-value="2">Title Z-A</div>
    </div>
</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({
        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 dropdown sort control. "dropdown-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-jump This data attribute can be used to scroll page to the specified location when user selects an option. 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
data-opened-class Optional data attribute that defines CSS class of opened dropdown with custom styles. CSS class name, by default jplist-dd-opened

Inner elements

Data attributes of inner elements.

Name Description Values
data-type="panel" Defines a dropdown panel that contains selected text. "panel"
data-type="content" Defines a wrapper around dropdown options. "content"
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 the initial selected value "true" or "false"