@!(data, className) @function header(){} @function body(){

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

} @render(process.cwd() + '/build/site/layouts/documentation.html', data, 'Getting Started', header, body, 'getting-started', 'getting-started')