页面分页显示功能

  要想实现分页显示的功能,先要准备好三个文件:pagination.css,jquery.pagination.js,jquery-2.1.1.js
  这三个文件的下载地址:https://github.com/gbirke/jquery_pagination

  注:在引用这三个文件的时候,要先引用jquery-2.1.1.js文件

  在需要用到分页的页面中,写入一下内容: 

$(function(){
$("#pagination").pagination(100, {
items_per_page:10,//每页显示多少条记录
current_page:2-1,//当前显示第几页数据
num_display_entries: 5,//分页显示的条目数
next_text:"下一页",
prev_text:"上一页",
num_edge_entries:2,//连接分页主体,显示的条目数
callback: handlePaginationClick
});
});

注:100表示的是总记录数,也就是从数据库中查询到的总条数

然后还有一个回调函数:

function handlePaginationClick(new_page_index, pagination_container){
$("#myform").attr("action","<%=basePath %>searchProductInfoAction!searchProductInfo.action?pageNum=" + (new_page_index + 1));
$("#myform").submit();
return false;
}

在页面标签中的相应位置加上:

<div id="pagination"></div>

如果页面进入死循环,可以将jquery.pagination.js文件中的最后的调用回调函数代码注释掉:

if(opts.load_first_page) {
opts.callback(current_page, containers);
}

 

posted on 2016-01-08 13:15  王东明  阅读(504)  评论(0编辑  收藏  举报

导航