Getting Started

The following tutorial describes how to create a page with ascending sort control and text filter control using jPList library.

See the Pen jPList Getting Started by 1rosehip (@1rosehip) on CodePen.

  1. Create a folder named test-project and create a new jplist folder inside it.
  2. Download jPList JS and CSS files and save them to the test-project/jplist folder.
  3. Create an empty index.html file and save it to the test-project folder.

  4. Copy & paste the basic HTMl structure:

    <!doctype html>
<html lang="en">
    <head>
        <title>jPList Hello World</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    </head>
    <body>
        
    </body>
</html>

  5. Add CSS file to the HEAD:

    <!doctype html>
<html lang="en">
    <head>
        <title>jPList Hello World</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <!-- jPList CSS -->
        <link rel="stylesheet" href="jplist/jplist.styles.css" />
    </head>
    <body>
        
		
    </body>
</html>

  6. Let's add hidden sort and textbox filter controls:

    <html lang="en">
    <head>
        <title>jPList Hello World</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <!-- jPList CSS -->
        <link rel="stylesheet" href="jplist/jplist.styles.css" />
    </head>
    <body>
        
        <!-- hidden sort control -->
        <div
            style="display: none"
            data-jplist-control="hidden-sort"
            data-group="group1"
            data-path=".name"
            data-order="asc"
            data-type="text">
        </div>

        <!-- text filter control -->
        <div>
            <input
                data-jplist-control="textbox-filter"
                data-group="group1"
                data-name="my-filter-1"
                data-path=".name"
                type="text"
                value=""
                data-clear-btn-id="name-clear-btn"
                placeholder="Filter by Name" />
            
            <button type="button" id="name-clear-btn">Clear</button>
        </div>
    </body>
</html>

  7. Now let's add sample data that should be wrapped by HTML element with data-jplist-group="group1" attribute. The value group1 can be any text value. Sort and textbox filter controls have data-group="group1" meaning that these controls should be applied to this group.

    Also every element in the group should have data-jplist-item data attribute. This way jPList identifies HTML elements that should be sorted and filtered: 

    <!doctype html>
<html lang="en">
    <head>
        <title>jPList Hello World</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <!-- jPList CSS -->
        <link rel="stylesheet" href="jplist/jplist.styles.css" />
    </head>
    <body>

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

            <!-- text filter control -->
            <div>
                <input
                    data-jplist-control="textbox-filter"
                    data-group="group1"
                    data-name="my-filter-1"
                    data-path=".name"
                    type="text"
                    value=""
                    data-clear-btn-id="name-clear-btn"
                    placeholder="Filter by Name" />

                <button type="button" id="name-clear-btn">Clear</button>
            </div>

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

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Cecilia Hanson</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Alejandro Miles</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Andy Harris</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Deanna Castillo</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Danny Richards</div>
                </div>

                 <!-- item -->
                <div data-jplist-item>
                    <div class="name">Allie Moss</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Stefanie Reyes</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Jakob Flores</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Christine Richards</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Miranda Hill</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Meghan Williamson</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Kierra Long</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Tara Park</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Anthony Reyes</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Malik Becker</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Daisy Hunter</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Arianna Fuller</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Stephan Wang</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Cristal Wallace</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Alyson Chandler</div>
                </div>

        </div>

    </body>
</html>

  8. We can also add no results control that shows a message when no results are found:

    <!doctype html>
<html lang="en">
    <head>
        <title>jPList Hello World</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <!-- jPList CSS -->
        <link rel="stylesheet" href="jplist/jplist.styles.css" />
    </head>
    <body>

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

            <!-- text filter control -->
            <div>
                <input
                    data-jplist-control="textbox-filter"
                    data-group="group1"
                    data-name="my-filter-1"
                    data-path=".name"
                    type="text"
                    value=""
                    data-clear-btn-id="name-clear-btn"
                    placeholder="Filter by Name" />

                <button type="button" id="name-clear-btn">Clear</button>
            </div>

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

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Cecilia Hanson</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Alejandro Miles</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Andy Harris</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Deanna Castillo</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Danny Richards</div>
                </div>

                 <!-- item -->
                <div data-jplist-item>
                    <div class="name">Allie Moss</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Stefanie Reyes</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Jakob Flores</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Christine Richards</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Miranda Hill</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Meghan Williamson</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Kierra Long</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Tara Park</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Anthony Reyes</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Malik Becker</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Daisy Hunter</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Arianna Fuller</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Stephan Wang</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Cristal Wallace</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Alyson Chandler</div>
                </div>

                <!-- no results control -->               
                <div data-jplist-control="no-results" data-group="group1" data-name="no-results">No Results Found</div>

        </div>

    </body>
</html>

  9. Now let's add jPList javascript file to the bottom of HTML:

    <!doctype html>
<html lang="en">
    <head>
        <title>jPList Hello World</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <!-- jPList CSS -->
        <link rel="stylesheet" href="jplist/jplist.styles.css" />
    </head>
    <body>

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

            <!-- text filter control -->
            <div>
                <input
                    data-jplist-control="textbox-filter"
                    data-group="group1"
                    data-name="my-filter-1"
                    data-path=".name"
                    type="text"
                    value=""
                    data-clear-btn-id="name-clear-btn"
                    placeholder="Filter by Name" />

                <button type="button" id="name-clear-btn">Clear</button>
            </div>

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

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Cecilia Hanson</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Alejandro Miles</div>
                </div>

                <!-- item -->
                <div data-jplist-item>
                    <div class="name">Andy Harris</div>
                </div>

                ...

                <!-- no results control -->
                <div data-jplist-control="no-results" data-group="group1" data-name="no-results">No Results Found</div>

        </div>

        <!-- IE 10+ / Edge support via babel-polyfill: https://babeljs.io/docs/en/babel-polyfill/ -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

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

    </body>
</html>