Fork me on GitHub

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

Sort Buttons Control Usage

Sort Buttons 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 Buttons Control -->			
<script src="jplist.sort-buttons.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 buttons -->					
		<div class="jplist-box"
			 data-control-type="sort-buttons-group" 
			 data-control-name="sort-buttons-group-1"
			 data-control-action="sort"
			 data-mode="single">
			
			<button 
				class="jplist-drop-down" 							
				data-datetime-format="{month}/{day}/{year}"
				data-path=".title"
				data-type="text"
				data-order="desc">Sort by title desc</button>	
			<button 
				class="jplist-drop-down" 
				data-datetime-format="{month}/{day}/{year}"
				data-path=".title"
				data-type="text"
				data-order="asc"
				data-selected="true">Sort by title asc</button>
				
			<button 
				class="jplist-drop-down" 
				data-datetime-format="{month}/{day}/{year}"
				data-path=".date"
				data-type="datetime"
				data-order="desc">Sort by date desc</button>	
			<button 
				class="jplist-drop-down" 
				data-datetime-format="{month}/{day}/{year}"
				data-path=".date"
				data-type="datetime"
				data-order="asc">Sort by date asc</button>
		</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>