jQuery: pagination

more at: http://web.enavu.com/tutorials/making-a-jquery-pagination-system/

by Gwyn Milcote

HTML

<div class="pagi">
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div8</div>
<div class="y">div9</div>
<div class="y">div10</div>
<div class="y">div11</div>
<div class="y">div12</div>
<div class="y">div13</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div8</div>
<div class="y">div9</div>
<div class="y">div10</div>
<div class="y">div11</div>
<div class="y">div12</div>
<div class="y">div13</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div8</div>
<div class="y">div9</div>
<div class="y">div10</div>
<div class="y">div11</div>
<div class="y">div12</div>
<div class="y">div13</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div8</div>
<div class="y">div9</div>
<div class="y">div10</div>
<div class="y">div11</div>
<div class="y">div12</div>
<div class="y">div13</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div8</div>
<div class="y">div9</div>
<div class="y">div10</div>
<div class="y">div11</div>
<div class="y">div12</div>
<div class="y">div13</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div8</div>
<div class="y">div9</div>
<div class="y">div10</div>
<div class="y">div11</div>
<div class="y">div12</div>
<div class="y">div13</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div15</div>
<div class="y">div8</div>
<div class="y">div9</div>
<div class="y">div10</div>
<div class="y">div11</div>
<div class="y">div12</div>
<div class="y">div13</div>
<div class="y">div15</div>
<div class="y">div15</div>
</div>
<p>
<div class='linky'></div>
</p>

CSS

.controls a{padding:5px;border:1px solid gray;border-radius:5px;margin:2px;color:black;text-decoration:none; cursor:pointer;}
.active{ background-color:grey;color:white !important;}
.pagi {border:1px solid red;padding:5px;margin:10px;width:100px;height:100px;overflow:auto;}
.linky {margin:20px;border:1px dashed green;padding:10px;}

JavaScript

$(document).ready(function() {

    var show_per_page = 8;
    var number_of_items = $('.pagi').children('.y').size();
    var number_of_pages = Math.ceil(number_of_items / show_per_page);
    // count how many elements called 'y' are inside div 'pagi'

    $('.linky').append('<div class=controls></div><input id=current_page type=hidden><input id=show_per_page type=hidden>');
    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);
    // display the options inside 'linky' div

    var navigation_html = '<a class="prev" onclick="previous()">Prev</a>';
    var current_link = 0;
    while (number_of_pages > current_link) {
        navigation_html += '<a class="page" onclick="go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';
        current_link++;
    }
    navigation_html += '<a class="next" onclick="next()">Next</a>';
    $('.controls').html(navigation_html);
    $('.controls .page:first').addClass('active');
    $('.pagi').children().css('display', 'none');
    $('.pagi').children().slice(0, show_per_page).css('display', 'block');
});



function go_to_page(page_num) {
    var show_per_page = parseInt($('#show_per_page').val(), 0);
    start_from = page_num * show_per_page;
    end_on = start_from + show_per_page;
    $('.pagi').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
    $('.page[longdesc=' + page_num + ']').addClass('active').siblings('.active').removeClass('active');
    $('#current_page').val(page_num);
}



function previous() {
new_page = parseInt($('#current_page').val(), 0) - 1;
//if there is an item before the current active link, run function
    if ($('.active').prev('.page').length == true) {
        go_to_page(new_page);
    }
}

function next() {
new_page = parseInt($('#current_page').val(), 0) + 1;
//if there is an item after the current active link, run function
    if ($('.active').next('.page').length == true) {
       ...