Fork me on GitHub

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

Items Per Page Dropdown Control Usage

Items Per Page Dropdown 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>	
<!-- Pagination Bundle -->			
<link href="jplist-pagination-bundle.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.pagination-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">						
		<!-- items per page dropdown -->
		<div 
		   class="jplist-drop-down" 
		   data-control-type="items-per-page-drop-down" 
		   data-control-name="paging" 
		   data-control-action="paging">
		   
		   <ul>
			  <li><span data-number="3"> 3 per page </span></li>
			  <li><span data-number="5"> 5 per page </span></li>
			  <li><span data-number="10" data-default="true"> 10 per page </span></li>
			  <li><span data-number="all"> view all </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>