Your paging buttons are added in a div with id pages, so you can reference the current page with:
$("#pages a").eq(current - 1)
as your “page” (current) value is 1-based, but .eq is 0-based, it needs to be -1.
Taking the more-complete code from the codepen and adding active to the current page link gives:
var itemsNumber = 6,
$items, pages = 1,
current = 1;
function makePages() {
$items = $(".filtered-div:visible");
pages = Math.ceil($items.length / itemsNumber);
$("#pages").empty();
for (var p = 1; p <= pages; p++) {
$("#pages").append($('<a href="#">' + p + '</a>'));
}
showPage(1);
}
function showPage(page) {
$items.hide().slice((page - 1) * itemsNumber, page * itemsNumber).show();
current = page;
$("div.ctrl-nav a").show();
if (current == 1) {
$("div.ctrl-nav a:first").hide();
} else if (current == pages) {
$("div.ctrl-nav a:last").hide();
}
$("div.ctrl-nav a.active").removeClass("active");
$("#pages a").eq(current - 1).addClass("active");
}
makePages();
$("div.ctrl-nav").on('click', 'a', function() {
var action = $(this).text();
if (action == 'Précédent') {
current--;
} else if (action == 'Suivant') {
current++;
} else if (+action > 0) {
current = +action;
}
if (current <= 1) {
current = 1;
} else if (current >= pages) {
current = pages;
}
showPage(current);
});
var $myitems = $('.filtered-div');
$('.btn-container').on('click', '.btn', function() {
var value = $(this).data('filter');
if (value == "all") {
$myitems.show();
} else {
var $selected = $myitems.filter(function() {
return $(this).data('tag').indexOf(value) != -1;
}).show();
$myitems.not($selected).hide();
}
$(this).addClass('active').siblings().removeClass('active');
makePages();
});.ctrl-nav {
width: calc(100% - 2rem);
display: flex;
align-items: center;
position: absolute;
bottom: 0;
padding: 1rem 0;
justify-content: center;
}
.ctrl-nav a {
text-decoration: none;
font-size:16px;
margin: 0 0.25rem;
padding:5px 10px;
}
.ctrl-nav a.active{
border-radius:8px;
background-color: #0085b6;
color: white;
}
.ctrl-nav a#prev{
float:left;
}
.ctrl-nav a#next{
float:right;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-container">
<button class="btn active" data-filter="all">Show All</button>
<button class="btn" data-filter="category-1">Category 1</button>
<button class="btn" data-filter="category-2">Category 2</button>
</div>
<div id="item-wrapper">
<div class="filtered-div" data-tag="['category-1']">item 1</div>
<div class="filtered-div" data-tag="['category-1']">item 2</div>
<div class="filtered-div" data-tag="['category-1']">item 3</div>
<div class="filtered-div" data-tag="['category-1']">item 4</div>
<div class="filtered-div" data-tag="['category-1']">item 5</div>
<div class="filtered-div" data-tag="['category-1']">item 6</div>
<div class="filtered-div" data-tag="['category-2']">item 7</div>
<div class="filtered-div" data-tag="['category-2']">item 8</div>
<div class="filtered-div" data-tag="['category-2']">item 9</div>
<div class="filtered-div" data-tag="['category-2']">item 10</div>
<div class="filtered-div" data-tag="['category-2']">item 11</div>
<div class="filtered-div" data-tag="['category-2']">item 12</div>
<div class="filtered-div" data-tag="['category-1']">item 13</div>
<div class="filtered-div" data-tag="['category-1']">item 14</div>
<div class="filtered-div" data-tag="['category-2']">item 15</div>
<div class="ctrl-nav">
<a href="#">Précédent</a><span id="pages"></span><a href="#">Suivant</a>
</div>
</div>