Simple jQuery breakdown
I have a page with about 50 divs on it. I would like to organize these divs into groups of six so that the client doesn't get "information overload". I created a simple example / reduced test case for my problem. As you can see there are a lot of divs and I want only the first six to be displayed on page load, but when you click on page 2 or further, the next six are displayed and so on. The page number class you are on should also matter class="current"
.
So far I've tried using jQuery, but I get stuck all the time! Any help would be much appreciated!
source to share
When a page is requested, hide any content dividers, then swipe over them to reveal the ones that should appear on the "page":
showPage = function(page) {
$(".content").hide();
$(".content").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
source to share
The parts of this code are not very pretty, but I think it does the job
var currentpage = 1;
var pagecount = 0;
function showpage(page) {
$('.content').hide();
$('.content').eq((page-1)*6).show().next().show().next().show().next().show().next().show().next().show();
$('#pagin').find('a').removeClass('current').eq(page).addClass('current');
}
$("#pagin").on("click", "a", function(event){
event.preventDefault();
if($(this).html() == "next") {
currentpage++;
}
else if($(this).html() == "prev") {
currentpage--;
} else {
currentpage = $(this).html();
}
if(currentpage < 1) {currentpage = 1;}
if(currentpage > pagecount) {currentpage = pagecount;}
showpage(currentpage);
});
$(document).ready(function() {
pagecount = Math.floor(($('.content').size()) / 6);
if (($('.content').size()) % 6 > 0) {
pagecount++;
}
$('#pagin').html('<li><a>prev</a></li>');
for (var i = 1; i <= pagecount; i++) {
$('#pagin').append('<li><a class="current">' + i + '</a></li>');
}
$('#pagin').append('<li><a>next</a></li>');
showpage(1);
});
source to share
The following code is taken from https://deltafrog.com/pagination-jquery-without-plugin/
jQuery('document').ready(function(){
var item_per_page=5;
var $block=jQuery('.block');
var block_count=$block.length;
var number_of_pages=Math.ceil(block_count/item_per_page);
//append pagination in body
jQuery('body').append("<div class='pagination'></div>");
for(var i=1; i<=number_of_pages; i++){
jQuery('.pagination').append("<div class='page'>"+i+"</div>");
}
//activate first page
jQuery(".page:first-child").addClass('active');
jQuery('.block').filter(function( index ) { return index < item_per_page;}).addClass('active');
//activate pagination on click
jQuery('body').delegate('.page','click',function(){
var page_index=jQuery(this).index();
var start=page_index*item_per_page;
$block.removeClass('active');
jQuery(".page").removeClass('active');
jQuery(".page").eq(page_index).addClass('active');
for(var j=0;j<item_per_page;j++){
$block.eq(start+j).addClass('active');
}
});
});
source to share