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);

}

 

这样代码就可以运行了