Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

Sort Select Control Usage

Sort Select Control

Add jPList scripts to the HEAD:

    
<!-- jPList core -->		
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.core.min.js"></script>	
<!-- Sort Bundle -->			
<script src="jplist.sort-bundle.min.js"></script>
<script>
$('document').ready(function(){
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
		
		<!-- select control -->
		<select 
		   class="jplist-select" 
		   data-control-type="sort-select" 
		   data-control-name="sort" 
		   data-control-action="sort">
		   
			  <option data-path="default">Sort by</option>
			  <option data-path=".title" data-order="asc" data-type="text">Title A-Z</option>
			  <option data-path=".title" data-order="desc" data-type="text">Title Z-A</option>
			  <option data-path=".desc" data-order="asc" data-type="text">Description A-Z</option>
			  <option data-path=".desc" data-order="desc" data-type="text">Description Z-A</option>
			  <option data-path=".like" data-order="asc" data-type="number">Likes asc</option>
			  <option data-path=".like" data-order="desc" data-type="number">Likes desc</option>
			  <option data-path=".date" data-order="asc" data-type="datetime">Date asc</option>
			  <option data-path=".date" data-order="desc" data-type="datetime">Date desc</option>								
		</select>		
		
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>