pagination div content jquery

by Akram kamal

HTML

http://jsfiddle.net/badvz/xsLg5kmb/1/#run<ul id=list>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
</ul>

CSS

.controls a{
    padding:3px;
    border:1px solid gray;
    margin:2px;
    color:black;
    text-decoration:none
}
.active{
    background:darkblue;
    color:white !important;
}

JavaScript

var show_per_page = 1, number_of_items,number_of_pages; 


$(document).ready(function() {

    

    $('body').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);
    
   

    
    number_of_items = $('#list').children('li').size();
    number_of_pages = Math.ceil(number_of_items / show_per_page);
    
   createPagination(1);
    
    

});

 

function createPagination(page){
    var navigation_html = '<a class="prev" onclick="previous()">Prev</a>';
    
    for (var i=page; i < (page + 4); i++ ) {
        navigation_html += '<a class="page" onclick="go_to_page(' + i + ')" longdesc="' + i + '">' + i + '</a>';
    }
    navigation_html += '<a class="next" onclick="next()">Next</a>';

    $('.controls').html(navigation_html);
    $('.controls .page:first').addClass('active');

    $('#list').children().css('display', 'none');
    $('#list').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 -1) * show_per_page;

    end_on = start_from + show_per_page;

    $('#list').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() {

    var currentPage = parseInt($('.controls').find('a:eq(1)').text(),10);
    
    var prev = currentPage - 4;
    if(prev < 1){
        prev = 1;
    }
    
    createPagination(prev);
    go_to_page(prev);

}

function next() {
    
    var currentPage = parseInt($('.controls').find('a:eq(1)').text(),10);
    
    var next = currentPage + 4;
    if(next > (number_of_pages - 4)){
        next = number_of_pages - 3;
    }
    
    createPagination(next);
    go_to_page(next);
    
  ...