Fork me on GitHub

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

Pagination Result Control Usage

Pagination Result 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:

    
<!-- example 1 -->
<div 
   class="jplist-label" 
   data-type="Page {current} of {pages}" 
   data-control-type="pagination-info" 
   data-control-name="paging" 
   data-control-action="paging">
</div>	
<!-- example 2 -->
<div 
   class="jplist-label" 
   data-type="{start} - {end} of {all}"
   data-control-type="pagination-info" 
   data-control-name="paging" 
   data-control-action="paging">
</div>