Fork me on GitHub

Getting Started

jPList's only hard dependency is jQuery. jQuery 1.8 or newer will work with jPList, although typically you will want to use the latest version of jQuery.

jPList is built as plugin system that relies on the main core file (or ajax core file for PHP / ASP.NET data sources). Any control or bundle requires it as a dependancy.

jPList bundles and controls can be found at bundles page and controls page respectively. Their latest version can be downloaded from the download page or from the jPList GitHub repository.

Bundles and controls can be mixed in any combination, they don't rely on each other. It is better to add only bundles and control that is used in the current application to improve performance of the page.

<!-- jQuery Library -->		
<script src="jquery.js"></script>

<!-- jPList Core -->
<script src="jplist.core.min.js"></script>
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />

<!-- jPList Sort Bundle -->
<script src="jplist.sort-bundle.min.js"></script>

<!-- jPList Pagination Bundle -->
<script src="jplist.pagination-bundle.min.js"></script>

<!-- Textbox Filter Control -->
<script src="jplist.textbox-filter.min.js"></script>
<link href="jplist.textbox-filter.min.css" rel="stylesheet" type="text/css" />
  
<!-- Other bundles or controls... -->           

Or

<!-- jQuery Library -->		
<script src="jquery.js"></script>

<!-- jPList Core for PHP / ASP.NET -->
<script src="jplist.core-ajax.min.js"></script>
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />

<!-- jPList Sort Bundle -->
<script src="jplist.sort-bundle.min.js"></script>

<!-- jPList Pagination Bundle -->
<script src="jplist.pagination-bundle.min.js"></script>

<!-- Textbox Filter Control -->
<script src="jplist.textbox-filter.min.js"></script>
<link href="jplist.textbox-filter.min.css" rel="stylesheet" type="text/css" />
  
<!-- Other bundles or controls... -->      

jPList is looking for a special HTML structure that is built from the following parts:

  • Controls Panel
    The HTML element that contains all jPList bundles and controls. It's possible to have more than one panel (for example top and bottom panels of the list). jPList is looking for an element with class 'panel'. This class can be changed in jPList settings in the panelPath parameter.
  • Items Container
    This HTML element wraps all HTML items that should be sorted, filtered, paginated etc. It should contain class list by default, but this class can be changed in jPList settings in the itemsBox parameter.
  • jPList item
    One item that is located in Items Container and can be sorted, filtered, paginated etc. It should contain class list-item by default, but this class can be changed in jPList settings in the itemPath parameter.
  • There are other optional elements that can be found on jPList settings page.
<!DOCTYPE HTML>
<html>
    <head>
        <!-- jquery library -->		
        <script src="jquery.js"></script>

        <!-- jPList Core -->
        <script src="jplist.core.min.js"></script>
        <link href="jplist.core.min.css" rel="stylesheet" type="text/css" />

        <!-- jPList Sort Bundle -->
        <script src="jplist.sort-bundle.min.js"></script>

        <!-- jPList Pagination Bundle -->
        <script src="jplist.pagination-bundle.min.js"></script>

        <!-- Textbox Filter Control -->
        <script src="jplist.textbox-filter.min.js"></script>
        <link href="jplist.textbox-filter.min.css" rel="stylesheet" type="text/css" />
  
        <!-- Other bundles or controls... -->
    
        <!-- Initialization -->
        <script>
        $('document').ready(function(){

           //check all jPList javascript options here
	        $('#demo').jplist({				
		        itemsBox: '.list', 
		        itemPath: '.list-item', 
		        panelPath: '.jplist-panel'	
	        });
	
        });
        </script>
    </head>
    <body>
        <!-- demo -->
        <div id="demo">
   
           <!-- panel -->
           <div class="jplist-panel">						
      
              <!-- add here jPList controls and bundles -->
      
           </div>				 
   
           <!-- HTML data -->   
           <div class="list">
      
		        <!-- item 1 -->
		        <div class="list-item">	
                    <!-- any HTML structure -->
		        </div>

		        <!-- item 2 -->
		        <div class="list-item">	
                    <!-- any HTML structure -->
		        </div>
		        
              <!-- any number of items ... -->
      
           </div>
   
           <!-- no results found -->
           <div class="jplist-no-results">
              <p>No results found</p>
           </div>
               
        </div>				    
    </body>
</html>

Every control has its own HTML structure and settings that can be found on the controls page. While the panel controls may have a well defined structure, the list items may have any HTML structure almost without restrictions.

Please check below an example for textbox filter control:

<!DOCTYPE HTML>
<html>
    <head>
        <!-- jquery library -->		
        <script src="jquery.js"></script>

        <!-- jPList Core -->
        <script src="jplist.core.min.js"></script>
        <link href="jplist.core.min.css" rel="stylesheet" type="text/css" />

        <!-- jPList Textbox Filter Control -->
        <link href="jplist.textbox-filter.min.css" rel="stylesheet" type="text/css" />
        <script src="jplist.textbox-filter.min.js"></script>
    
        <!-- Initialization -->
        <script>
        $('document').ready(function(){
          
	        $('#demo').jplist({				
		        itemsBox: '.list', 
		        itemPath: '.list-item', 
		        panelPath: '.jplist-panel'	
	        });
	
        });
        </script>
    </head>
    <body>
        <!-- demo -->
        <div id="demo">
   
           <!-- panel -->
           <div class="jplist-panel">						
      
                <!-- filter by title -->
                <div class="text-filter-box">
	                <i class="fa fa-search  jplist-icon"></i>
	                <input 
		                data-path=".title" 
		                type="text" 
		                value="" 
		                placeholder="Filter by Title" 
		                data-control-type="textbox" 
		                data-control-name="title-filter" 
		                data-control-action="filter"
	                />
                </div>
      
           </div>				 
   
           <!-- HTML data -->   
           <div class="list">
      
                <!-- item 1 -->
                <div class="list-item">	
	                <p class="title">Architecture</p>
                </div>

                <!-- item 2 -->
                <div class="list-item">	
	                <p class="title">Autumn</p>
                </div>

                <!-- item 3 -->
                <div class="list-item">	
	                <p class="title">Boats</p>
                </div>

                <!-- item 4 -->
                <div class="list-item">	
	                <p class="title">Arch</p>
                </div>

                <!-- item 5 -->
                <div class="list-item">	
	                <p class="title">Books</p>
                </div>
      
           </div>
   
           <!-- no results found -->
           <div class="jplist-no-results">
              <p>No results found</p>
           </div>
               
        </div>				    
    </body>
</html>

Next Steps