Afficher le contenu filtré sur la première page au lieu de montrer tout le contenu

Question

Je ne suis toujours pas familier avec jquery. Basé sur mon code, l'utilisateur peut filtrer le contenu en cliquant sur "Catégorie 1" ou "Catégorie 2" et il y a une pagination pour le contenu.

Actuellement, mon code affiche tout le contenu de la première page et le reste des pages. Ce que je veux, c'est que la page de démarrage affiche uniquement le contenu "Catégorie 1", sans cliquer sur aucun bouton/lien.

Le résultat que je veux indiqué ci-dessous: point 1, 2, 3, 4, 5, 6, 13 et 14 sont dans la "catégorie 1"

En espérant que certains d'entre vous pourrait me fournir avec quelques conseils. Merci!

var visible = ""; 
 
var liToShow = $('li'); 
 
$('div.filter').delegate('a', 'click', function (event) { 
 
    visible = '.' + this.href.slice(this.href.indexOf("#") + 1); 
 
$('ul.items li').hide(); 
 
$(visible).show(); 
 
liToShow = $(visible); 
 
pagination(); 
 
    event.preventDefault(); 
 
}); 
 

 
pageSize = 8; 
 
var i = 1; 
 
showPage = function(page) { 
 
$("li").hide(); 
 
$("li").each(function(n) { 
 
    if (n >= pageSize * (page - 1) && n < pageSize * page) 
 
     $(this).show(); 
 
});   
 
} 
 

 
showPage(i); 
 

 
function pagination(action) { 
 

 
var pages = Math.ceil(liToShow.length/pageSize); 
 
$('#pager').html(""); 
 
for (var i = 0; i<pages; i++) { 
 
    $('#pager').append('<a href="#" class="pageClick">'+(i+1)+'</a> &nbsp;'); 
 
} 
 
$('.pageClick').on('click', function(e) { 
 
    e.preventDefault(); 
 
    showPage($(this).index()+1); 
 
}); 
 

 
} 
 

 
pagination();

ul{list-style: none;} 
 

 
#item-wrapper { 
 
width:250px; 
 
margin:30px 0 0 30px; 
 
} 
 
.items li { 
 
font-family:arial; 
 
font-size:13px; 
 
background-color:#ccc; 
 
margin-bottom:1px; 
 
padding:5px;  
 
} 
 
.ctrl-nav { 
 
    background-color:#999; 
 
    padding:5px; 
 
    overflow:hidden; 
 
} 
 
.ctrl-nav a { 
 
    font-family:arial; 
 
font-size:13px; 
 
    padding:5px 10px; 
 
    color:#fff; 
 
} 
 
.ctrl-nav a#prev{ 
 
float:left; 
 
} 
 
.ctrl-nav a#next{ 
 
float:right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filter"> 
 
    <a href="#category-1">category 1</a> 
 
    <a href="#category-2">category 2</a> 
 
</div> 
 

 
<div id="item-wrapper"> 
 
<ul class="items"> 
 
    <li class="category-1">item 1</li> 
 
    <li class="category-1">item 2</li> 
 
    <li class="category-1">item 3</li> 
 
    <li class="category-1">item 4</li> 
 
    <li class="category-1">item 5</li> 
 
    <li class="category-1">item 6</li> 
 
    <li class="category-2">item 7</li> 
 
    <li class="category-2">item 8</li> 
 
    <li class="category-2">item 9</li> 
 
    <li class="category-2">item 10</li> 
 
    <li class="category-2">item 11</li> 
 
    <li class="category-2">item 12</li> 
 
    <li class="category-1">item 13</li> 
 
    <li class="category-1">item 14</li> 
 
    <li class="category-2">item 15</li> 
 
</ul> 
 

 
<div id="pager"></div> 
 
</div>

Answer 1

Il suffit de déclencher le clic de Category#1 sur le document méthode prêt comme celui-ci

$(document).ready(function(){ 
    $('div.filter a:first-child').trigger('click'); 
});