网页分页jquery代码 jquery实现分页功能

分页功能在项目开发中不可或缺，老司机操作起来就和呼吸一样简单，新手恐怕就会吃力一些。 

今天我回顾了一下具体的操作步骤，决定详细的分析一下每一步的实现目的及原理。

我们会创建一个简单的json文件来模拟要从数据库请求的数据。

分页应注意下面几点问题：

1）  每页的条目数量，以下用show_per_page变量来表示

2）  页数的统计，总页数/show_per_page就是页数了

3）  利用a标签的href属性，指向对应的函数，就可以实现页面跳转

4）  定义a标签的一个longdisc属性，来判断哪个a标签被选中，给他添加active_page类名 

HTML代码：

//用来存放目前的选中页
<input type='hidden' id='current_page' />
//存放显示的页面条数
<input type='hidden' id='show_per_page' />
//显示内容的盒子
<div id='content'>
</div>
//存放供选择页面的点击按钮
<div id='page_navigation'></div><br>
<br>

 jQuery代码：

$(function(){
//一个ajax的get请求，获取要得到的数据
 　　$.get("get.json",function(data){
 　　　　var data=data;
//命名分页的条目数量
 　　　　var show_per_page = 5; 
//获取到的数据条目数就是总的条目数量
 　　　　var number_of_items = data.list.length;
 //遍历这些条目，创建p标签并添加到div里面
 　　　　var htmlStr="";
 　　　　$.each(data.list, function(index,obj) {
 　　　　　　htmlStr+="<p>"+obj+"</p>";
 　　　　});
 　　　　$("#content").append(htmlStr);
//显示的页数
 　　　　var number_of_pages = Math.ceil(number_of_items/show_per_page);
 //选中页默认为0
 　　　　$('#current_page').val(0);
 //显示页面的条数
 　　　　$('#show_per_page').val(show_per_page);
//拼接向前翻页字符串
 　　　　var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
//拼接将要显示的总页数的字符串，longdesc类似于alt标签属性，用作选中元素添加active_page类名
 　　　　var current_link = 0;
 　　　　while(number_of_pages > current_link){
                        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ 　　　　(current_link + 1) +'</a>';
 　　　　　　current_link++;
 　　　　}
//拼接向后翻页字符串
 　　　　navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
//将字符串添加到列表里
 　　　　$('#page_navigation').html(navigation_html);
//默认第一个页数按钮的class名字
 　　　　$('#page_navigation .page_link:first').addClass('active_page');
//将获取的条数全部隐藏
 　　　　$('#content').children().css('display', 'none');
//第一页显示的条数显示
 　　　　$('#content').children().slice(0, show_per_page).css('display', 'block');
 　　})
});
//向前翻页，回顾拼接字符串的点击跳转属性 
function previous(){        
 　　new_page = parseInt($('#current_page').val()) - 1;
//判断如果它前面有兄弟元素，即跳到前一页
 　　if($('.active_page').prev('.page_link').length==true){
 　　　　go_to_page(new_page);
 　　}
}
//向后翻页 
function next(){
 　　new_page = parseInt($('#current_page').val()) + 1;
 　　//判断如果它后面有兄弟元素，即跳到后一页
 　　if($('.active_page').next('.page_link').length==true){
 　　　　go_to_page(new_page);
 　　}
}
//这才是最核心的函数，它带动每个翻页功能
function go_to_page(page_num){        
 　　var show_per_page = parseInt($('#show_per_page').val());
 　　start_from = page_num * show_per_page;
 　　end_on = start_from + show_per_page;
//除了当前显示页面的数据显示，其余都隐藏
 　　$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
//当前点击的页面a按钮添加avtive_page类名，其余都移除
 　　$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
 //最重要的一步
 　　$('#current_page').val(page_num);
}

这样代码就可以运行了