Fork me on GitHub

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

Sort Dropdown Control Usage

Sort Dropdown Control

Add jPList scripts to the HEAD:

    
<!-- jPList core -->		
<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">						
		
		<!-- sort dropdown -->
		<div 
			class="jplist-drop-down" 
			data-control-type="sort-drop-down" 
			data-control-name="sort" 
			data-control-action="sort"
			data-datetime-format="{month}/{day}/{year}"> <!-- {year}, {month}, {day}, {hour}, {min}, {sec} -->
			
			<ul>
				<li><span data-path="default">Sort by</span></li>
				<li><span data-path=".title" data-order="asc" data-type="text">Title A-Z</span></li>
				<li><span data-path=".title" data-order="desc" data-type="text">Title Z-A</span></li>
				<li><span data-path=".desc" data-order="asc" data-type="text">Description A-Z</span></li>
				<li><span data-path=".desc" data-order="desc" data-type="text">Description Z-A</span></li>
				<li><span data-path=".like" data-order="asc" data-type="number" data-default="true">Likes asc</span></li>
				<li><span data-path=".like" data-order="desc" data-type="number">Likes desc</span></li>
				<li><span data-path=".date" data-order="asc" data-type="datetime">Date asc</span></li>
				<li><span data-path=".date" data-order="desc" data-type="datetime">Date desc</span></li>
			</ul>
		</div>		
		
	</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>