# Select Sort Control

Select sort control is used to sorts content located at the specified CSS selector depending on user selection.

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

## HTML Structure

Select sort control is defined by required `data-jplist-control="select-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" />

    <!-- select sort control -->
    <select
        data-jplist-control="select-sort"
        data-group="group1"
        data-name="name1">

        <option
                value="0"
                data-path="default">Sort by</option>

        <option
                value="1"
                data-path=".title"
                data-order="asc"
                data-type="text"
                selected>Title A-Z</option>

        <option
                value="2"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</option>

        <option
                value="3"
                data-path=".likes"
                data-order="asc"
                data-type="number">Likes asc</option>

        <option
                value="4"
                data-path=".likes"
                data-order="desc"
                data-type="number">Likes desc</option>
    </select>

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

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

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

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

    </div>

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

### Top and bottom panels

Select 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:

    <!-- select sort control in the top panel -->
    <select
        data-jplist-control="select-sort"
        data-group="group1"
        data-name="name1">

        <option
                value="0"
                data-path="default">Sort by</option>

        <option
                value="1"
                data-path=".title"
                data-order="asc"
                data-type="text"
                selected>Title A-Z</option>

        <option
                value="2"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</option>

        <option
                value="3"
                data-path=".likes"
                data-order="asc"
                data-type="number">Likes asc</option>

        <option
                value="4"
                data-path=".likes"
                data-order="desc"
                data-type="number">Likes desc</option>
    </select>

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

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

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

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

    </div>

    <!-- select sort control in the bottom panel -->
    <select
        data-jplist-control="select-sort"
        data-group="group1"
        data-name="name1">

        <option
                value="0"
                data-path="default">Sort by</option>

        <option
                value="1"
                data-path=".title"
                data-order="asc"
                data-type="text"
                selected>Title A-Z</option>

        <option
                value="2"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</option>

        <option
                value="3"
                data-path=".likes"
                data-order="asc"
                data-type="number">Likes asc</option>

        <option
                value="4"
                data-path=".likes"
                data-order="desc"
                data-type="number">Likes desc</option>
    </select>

### 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.

    <select
        data-jplist-control="select-sort"
        data-group="group1"
        data-name="name1"
        data-jump="top">

        <option
                value="0"
                data-path="default">Sort by</option>

        <option
                value="1"
                data-path=".title"
                data-order="asc"
                data-type="text"
                selected>Title A-Z</option>

        <option
                value="2"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</option>
    </select>

## 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.

    <!-- select sort control -->
    <select
        data-jplist-control="select-sort"
        data-group="group1"
        data-name="name1">

        <option
                value="0"
                data-path="default">Sort by</option>

        <option
                value="1"
                data-path=".title"
                data-order="asc"
                data-type="text"

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

                selected>Title ASC and Price ASC</option>

        <option
                value="2"
                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</option>
    </select>

    <!-- 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 `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" />

    <!-- select sort control -->
    <select
        data-jplist-control="select-sort"
        data-group="group1"
        data-name="name1"
        data-id="select1">

        <option
                value="0"
                data-path="default">Sort by</option>

        <option
                value="1"
                data-path=".title"
                data-order="asc"
                data-type="text"
                selected>Title A-Z</option>

        <option
                value="2"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</option>

        <option
                value="3"
                data-path=".likes"
                data-order="asc"
                data-type="number">Likes asc</option>

        <option
                value="4"
                data-path=".likes"
                data-order="desc"
                data-type="number">Likes desc</option>
    </select>

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

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

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

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            <div class="likes">25</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 `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" />

    <!-- select sort control -->
    <select
        data-jplist-control="select-sort"
        data-group="group1"
        data-name="name1"
        data-id="select1">

        <option
                value="0"
                data-path="default">Sort by</option>

        <option
                value="1"
                data-path=".title"
                data-order="asc"
                data-type="text"
                selected>Title A-Z</option>

        <option
                value="2"
                data-path=".title"
                data-order="desc"
                data-type="text">Title Z-A</option>

        <option
                value="3"
                data-path=".likes"
                data-order="asc"
                data-type="number">Likes asc</option>

        <option
                value="4"
                data-path=".likes"
                data-order="desc"
                data-type="number">Likes desc</option>
    </select>

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

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

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

        <!-- item -->
        <div data-jplist-item>
            <div class="title">Title value 1</div>
            <div class="likes">25</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 select sort control. | "select-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

### Inner elements

Data attributes of inner elements.

Name | Description | Values
--- | --- | ---
`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}"`