jQuery实现的简单分页功能的详细解析

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

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

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

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

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

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

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

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

HTML代码：

//用来存放目前的选中页

//存放显示的页面条数

//显示内容的盒子

</div>

//存放供选择页面的点击按钮

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

}

这样代码就可以运行了

秒客网

jQuery实现的简单分页功能的详细解析

相关文章