jQuery addClass example

Change class name on click in jQuery

by Dedi Wibisono

HTML

<ul id="pagin"></ul>

<div class='group'>Group 1</div>
<div class='group'>Group 2</div>
<div class='group'>Group 3</div>
<div class='group'>Group 4</div>
<div class='group'>Group 5</div>
<div class='group'>Group 6</div>
<div class='group'>Group 7</div>
<div class='group'>Group 8</div>
<div class='group'>Group 9</div>
<div class='group'>Group 10</div>
<div class='group'>Group 11</div>
<div class='group'>Group 12</div>
<div class='group'>Group 13</div>
<div class='group'>Group 14</div>
<div class='group'>Group 15</div>
<div class='group'>Group 1</div>
<div class='group'>Group 2</div>
<div class='group'>Group 3</div>
<div class='group'>Group 4</div>
<div class='group'>Group 5</div>
<div class='group'>Group 6</div>
<div class='group'>Group 7</div>
<div class='group'>Group 8</div>
<div class='group'>Group 9</div>
<div class='group'>Group 10</div>
<div class='group'>Group 11</div>
<div class='group'>Group 12</div>
<div class='group'>Group 13</div>
<div class='group'>Group 14</div>
<div class='group'>Group 15</div>
<div class='group'>Group 1</div>
<div class='group'>Group 2</div>
<div class='group'>Group 3</div>
<div class='group'>Group 4</div>
<div class='group'>Group 5</div>
<div class='group'>Group 6</div>
<div class='group'>Group 7</div>
<div class='group'>Group 8</div>
<div class='group'>Group 9</div>
<div class='group'>Group 10</div>
<div class='group'>Group 11</div>
<div class='group'>Group 12</div>
<div class='group'>Group 13</div>
<div class='group'>Group 14</div>
<div class='group'>Group 15</div>
<div class='group'>Group 1</div>
<div class='group'>Group 2</div>
<div class='group'>Group 3</div>
<div class='group'>Group 4</div>
<div class='group'>Group 5</div>
<div class='group'>Group 6</div>
<div class='group'>Group 7</div>
<div class='group'>Group 8</div>
<div class='group'>Group 9</div>
<div class='group'>Group 10</div>
<div class='group'>Group 11</div>
<div class='group'>Group 12</div>
<div class='group'>Group 13</div>
<div class='group'>Group 14</div>
<div...

CSS

body {
  background: #cdcdcd;
  font-family: Helvetica;
}

#pagin {
  list-style: none;
  float: left;
  width: 100%;
  border-bottom: solid 1px #666666;
}

#pagin a{
  float: left;
  display: block;
  padding: 5px 10px;
  margin: 4px;
  background-color: #dd5555;
  text-decoration: none;
  color: white;
  border-radius: 5px;
}

#pagin a.current{
  background-color: #55dddd;
}

JavaScript

var pageSize = 12;
var currentPage = 0;
var pageCount;

$(document).ready(function(){    
    pageCount =  $(".group").length / pageSize;
    
    alert($(".group").length)
    
    // first/prev links
    $("#pagin").append('<li><a href="#" class="hidden" data-index="0">first</a></li>');
    $("#pagin").append('<li><a href="#" class="hidden" data-index="prev">prev</a></li>');

    for(var i = 0 ; i<pageCount;i++){
      $("#pagin").append('<li><a href="#" data-index="'+i+'">'+(i+1)+'</a></li>');
    }
    
    // next/last links
    $("#pagin").append('<li><a href="#" class="hidden" data-index="next">next</a></li>');
    $("#pagin").append('<li><a href="#" class="hidden" data-index="'+pageCount+'">last</a></li>');

   selectPage(0);

   $("#pagin li a").click(function() {
     selectPage($(this).data('index'));
 });
});

function selectPage(page){
  if (page == 'prev') {page = currentPage - 1; }
  if (page == 'next') { page = currentPage + 1; }
  
  // ensure it's within bounds
  if (page < 0) { page = 0; }
  if (page >= pageCount){ page = Math.floor(pageCount);}
  
  // store the current page
  currentPage = page;

  var minGroupIndex = (page * pageCount);
  var maxGroupIndex = minGroupIndex + pageCount;

  // remove selected page highight
  $('#pagin .current').removeClass('current');
 
  // add current page highlight
  $("#pagin li a[data-index='"+page+"']").addClass("current");
  
  // hide all groups
  $('.group').hide();
  
  // show correct groups
  $('.group').each(function(i){
    if(i >= minGroupIndex && i <= maxGroupIndex){
      $(this).fadeIn();
    }
  });
}