Bootstrap 5 Pagination with content Example.

Have you ever wondered how to do a Bootstrap 5 Pagination that changes the content when you click the pager buttons?

In this article, we will be covering just that. All with Bootstrap 5 classes, and plain javascript and jQuery.

We will be using generic data for simplicity’s sake. You will have to adjust to your needs. For instance, in a real word situation, you could use this to display pages of videos, etc.

Without further ado, let’s get coding.

First, we need our HTML so let’s add this now.

<div class="container">
	<div class="row bs-pager-list">
		<div class="col-md-6 border border-secondary d-none">
			<p>Content block 1</p>
		</div><!-- /col -->
		<div class="col-md-6 border border-secondary d-none">
			<p>Content block 2</p>
		</div><!-- /col -->


		<div class="col-md-6 border border-secondary d-none">
			<p>Content block 3</p>
		</div><!-- /col -->

		<div class="col-md-6 border border-secondary d-none">
			<p>Content block 4</p>
		</div><!-- /col -->

		<div class="col-md-6 border border-secondary d-none">
			<p>Content block 5</p>
		</div><!-- /col -->

		<div class="col-md-6 border border-secondary d-none">
			<p>Content block 6</p>
		</div><!-- /col -->

		<div class="col-md-6 border border-secondary d-none">
			<p>Content block 7</p>
		</div><!-- /col -->
		
		<div class="col-md-6 border border-secondary d-none">
			<p>Content block 8</p>
		</div><!-- /col -->
	</div><!-- /row -->
	<div class="row">
		<div class="col-12">
			<nav aria-label="Page navigation potsPager">
				<ul class="pagination justify-content-center"></ul>
			</nav>
		</div>
	</div>
</div>
</div><!-- /container -->

Now we can add our javascript/jquery.

jQuery(document).ready(function($){ //wait for the document to load

/*
	// You can count each block and then see how many they are
	let blockCount = $('.bs-pager-list').find('.col-md-6').length;
	console.log('Count is: '+blockCount);
	
	// This bit you can use to see how many pages you should have at the end
	let blockdivs = $(".bs-pager-list > .col-md-6");
	let count = 0;
	// Change the 4 to however many items you want per page.. Also below in the main code block
	for(let i = 0; i < blockdivs.length; i+=4) {
		
		count += 1;
		blockdivs.slice(i, i+4).wrapAll('<div id="wrap' + count + '" class="pager-container" style="display:contents;"></div>');
		
		if (count >= 2) {
			$("#wrap" + count).hide();
		}
	}
	
	let divWraps = $('.bs-pager-list').find('.pager-container').length;
	console.log('Wrapped Divs: ' + divWraps);
*/

	let listElement = $('.bs-pager-list');
	let perPage = 4; 
	let numItems = listElement.children().size();
	let numPages = Math.ceil(numItems/perPage);
	
	$('.pager, .pagination').data("curr",0);
	
	let curr = 0;
	while(numPages > curr){
		$('<li id="page'+(curr+1)+'" class="page-item"><a href="" class="page-link">'+(curr+1)+'</a></li>').appendTo('.pager, .pagination');
		curr++;
	}
	
	$('.pager .page-link:first, .pagination .page-item:first').addClass('active');
	
	// Next 2 lines used for testing but you could use this
	//listElement.children().css('display', 'none');
	//listElement.children().slice(0, perPage).css('display', 'block');
	listElement.children().slice(0, perPage).removeClass('d-none');
	
	$('.pager li a, .pagination li a').click(function(){
		event.preventDefault();
		$('.pager .page-link, .pagination .page-item').removeClass('active');

		let clickedPage = $(this).html().valueOf() - 1;
		$(this).parent('.page-item').addClass('active');
		goTo(clickedPage,perPage);
	});
	
	function previous(){
		event.preventDefault();
		let goToPage = parseInt($('.pager, .pagination').data("curr")) - 1;
		if($('.active').prev('.page-link').length==true){
			goTo(goToPage);
		}
	}
	
	function next(){
		event.preventDefault();
		goToPage = parseInt($('.pager, .pagination').data("curr")) + 1;
		if($('.active-page').next('.page-link').length==true){
			goTo(goToPage);
		}
	}
	
	function goTo(page){
		event.preventDefault();
		let startAt = page * perPage,
		endOn = startAt + perPage;
		
		// Used for testing but you can use this if you'd like
		//listElement.children().css('display','none').slice(startAt, endOn).css('display','block');
		listElement.children().addClass('d-none').slice(startAt, endOn).removeClass('d-none');
		$('.pager, .pagination').attr("curr",page);
	}
	
});

Now, let’s break down some of this code and explain what’s going on.

For the first bit of javascript that is commented out. You can uncomment it and then go to your browsers console log to see its output. The first console.log() will tell you exactly how many .col-md-6 divs you have inside the .bs-pager-list

Now, the code that makes everything work.

The listElement is the parent div’s class

perPage is how many elements you want to display per page

You will also notice that there is 2 class .pager and .pagination This is so it is compatible with earlier versions of Bootstrap.

We also set each block to .d-none in the HTML and then as the script loads it will display accordingly.

There are other functions to use a “Next” or “Previous” buttons if you wish to use those.

Here is a working example of the above code.

We hope you find this article useful.

Need help with your WordPress site? Contact Us for a FREE quote.