Fork me on GitHub

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

Bootstrap Pagination Control Usage

Bootstrap Pagination Control

Add jPList scripts to the HEAD:

<!-- bootstrap css and js -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
		
<!-- jplist core -->
<script src="jplist.core.min.js"></script>	
<!-- jplist bootstrap pagination bundle -->			
<script src="jplist.bootstrap-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">						
		
		<!-- bootstrap pagination control -->
		<ul 
			 class="pagination pull-left jplist-pagination"
			 data-control-type="boot-pagination" 
			 data-control-name="paging" 
			 data-control-action="paging"
			 data-range="4"
			 data-mode="google-like">
		</ul>
		
		<!-- pagination info label -->
		<div 
			class="pull-left jplist-pagination-info"
			data-type="<strong>Page {current} of {pages}</strong><br/> <small>{start} - {end} of {all}</small>" 
			data-control-type="pagination-info" 
			data-control-name="paging" 
			data-control-action="paging"></div>
			
		<!-- items per page dropdown -->
		<div 
			class="dropdown pull-left jplist-items-per-page"
			data-control-type="boot-items-per-page-dropdown" 
			data-control-name="paging" 
			data-control-action="paging">
			<button 
				class="btn btn-primary dropdown-toggle" 
				type="button" 
				data-toggle="dropdown" 
				id="dropdown-menu-1"
				aria-expanded="true">					
				<span data-type="selected-text">Items per Page</span>
				<span class="caret"></span>						
			</button>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu-1">
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-number="3">3 per page</a>
				</li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-number="5" data-default="true">5 per page</a>
				</li>
				
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-number="10">10 per page</a>
				</li>
				<li role="presentation" class="divider"></li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" data-number="all">View All</a>
				</li>
			</ul>						  
		</div>
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>	
					
</div>