Awake

Below code is html code you can add into .html or .php file and you can see card are repeated 8 times. Into pagination.js file if you set rowsPerPage = 6 then on first page displayed 6 card and remaining will displayed on second page. So you can adjust ‘rowsPerPage’ as per your requirement.

<div class="pagination">
<div class="card>Card 1</div>
<div class="card>Card 2</div>
<div class="card>Card 3</div>
<div class="card>Card 4</div>
<div class="card>Card 5</div>
<div class="card>Card 6</div>
<div class="card>Card 7</div>
<div class="card>Card 8</div>
</div>
<!-- Start Pagination -->
<nav class="p_pagination" id="paginatee">
	<ol id="page_numbers" class="p-0 m-0 list-unstyled d-flex flex-wrap justify-content-center"></ol>
</nav>

pagination.js

const rowsPerPage = 6;
const rows = $('#p-ajax-row .product-cards');
const rowsCount = rows.length;
const pageCount = Math.ceil(rowsCount / rowsPerPage);
const numbers = $('#page_numbers');

numbers.html('');
for (var i = 0; i < pageCount; i++) {
	numbers.append('<li><a href="#">' + (i + 1) + '</a></li>');
}

$('#page_numbers li:first-child a').addClass('active');
displayRows(1);

$('#page_numbers li a').click(function (e) {
	var $this = $(this);
	e.preventDefault();

	// Remove the active class from the links.
	$('#page_numbers li a').removeClass('active');

	// Add the active class to the current link.
	$this.addClass('active');

	// Show the rows corresponding to the clicked page ID.
	displayRows($this.text());
});
	
// Function that displays rows for a specific page.
function displayRows(index) {
	var start = (index - 1) * rowsPerPage;
	var end = start + rowsPerPage;
	// Hide all rows.
	rows.hide();
	// Show the proper rows for this page.
	rows.slice(start, end).show();
}