Change prev and next to work on pagination, with filtering function

Question

I'm using this jsfiddle code and trying to change to following requirements.

1. Change the "prev" and "next" button to pagination (e.g. 1 2 3 4 and so on)
2. Show the "Category 1" content on first page instead of show all contents

This is the code I have changed to pagination but I'm not sure how to combine it with the filtering function. And also not sure how to show the "Category 1" content on first page. Hoping that some of you could provide me with some advice. Thanks!

Please take note on the filtering function.

var visible = "";

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

pageSize = 5;
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($('li').length / pageSize) 
    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

you can hide all the li first and then show $(visible). Also in your pagination function just add $('#pager').html("") at start so that you don't repeat numbers. not sure what you are trying to do but you might want to change your pagination logic for categories.

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 = 5;
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>