Fork me on GitHub

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

Hidden Sort Control Usage

Hidden Sort 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">						
		
		<!-- hidden sort control -->
		<div 
			class="hidden" 
			data-control-type="default-sort" 
			data-control-name="sort" 
			data-control-action="sort"
			data-path=".title" 
			data-order="desc" 
			data-type="text">
		</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>