专注于 JAVA WEB开发
« »
2010/01/19IT技术

526 views

JQuery Pager Plugin


JQuery Pager Plugin

JQuery Pager Plugin


这里介绍一个Jquery 的pager插件，相信会有很多人需要他，具体参考http://www.j-dee.com/2008/12/22/jquery-pager-plugin/

你可以从这里查询他是如何工作的，以及一个简单的demo http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html

到这里去下载它http://github.com/jonpauldavies/jquery-pager-plugin/tree/master

我的使用经验：

使用非常简单，你之需要为它定义记录的总页数(或你想显示的页数),当前页码，以及一个当你点击页码时触发的回调函数。

?View Code JAVASCRIPT
Sample:
 
/**
 * 调用$.ajax请求获取Comment记录;
 * 请求参数是(当前页,每页记录数,查询条件...);
 * 返回(Comment记录,当前页,总页数)
 **/
function getComment(){
 ...
}
 
/**
 *通过JS重绘页面
 *重绘pager DIV
 *
 **/
function showComment(){
  ...
 
  $("#pager").pager({ pagenumber: currentPage, pagecount: pageCount, buttonClickCallback:   
 
                    PageClick });
 
  PageClick = function(pageclickednumber)
   {
     getComment(pageclickednumber);
   }
}

PageClick 就是我们定义的回调函数,当点击页码的时候请求数据.

另外他还可以自定义样式，你可以像下面这样去自定义它的显示：

?View Code CSS
   #pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}
 
#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}
 
#pager ul.pages li:hover {
border:1px solid #003f7e;
}
 
#pager ul.pages li.pgEmpty {
border:1px solid #eee;
color:#eee;
}
 
#pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#eee;
}

Have enjoy it!

日志信息 »

该日志于2010-01-19 12:11由 tj4c 发表在IT技术分类下， 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下引用到你的网站或博客，还可以通过RSS 2.0订阅这个日志的所有评论。

相关日志 »

Related Posts

1条评论▼

  1. 高于怡 说：
    2010/02/01于15:15

    http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html

    到这里去下载它http://github.com/jonpauldavies/jquery-pager-plugin/tree/master

    我的使用经验：

    回复

发表评论 »

返回顶部