用到的CSS文件 position: relative;}
.pgContainer {
min-height:100px;
_height:100px;
}
.pgToolbar {
width:100%;
height:30px;
font-size:12px;
line-height:30px;
background: url(../images/wbg.gif);
}
.pgPanel {
float:left;
padding:0 10px 0 10px;
}
.pgToolbar div {
float:left;
}
.pgBtn {
width: 20px;
height: 28px;
display: block;
cursor: pointer;
margin:1px;
}
.pgPress {
margin:2px 0 0 2px;
}
.pgPrev {
background: url(../images/prev.gif) no-repeat center;
}
.pgPrevDisabled {
background: url(../images/prev_disabled.gif) no-repeat center;
cursor:auto;
}
.pgNext {
background: url(../images/next.gif) no-repeat center;
}
.pgNextDisabled{
background: url(../images/next_disabled.gif) no-repeat center;
cursor:auto;
}
.pgFirst {
background: url(../images/first.gif) no-repeat center;
}
.pgFirstDisabled {
background: url(../images/first_disabled.gif) no-repeat center;
cursor:auto;
}
.pgLast {
background: url(../images/last.gif) no-repeat center;
}
.pgLastDisabled {
background: url(../images/last_disabled.gif) no-repeat center;
cursor:auto;
}
.pgRefresh {
background: url(../images/load.png) no-repeat center;
}
.pgLoad {
background: url(../images/load.gif) no-repeat center;
}
.pgCurrentPage {
width:30px;
height:16px;
line-height:16px;
text-align:center;
border:1px solid #CCCCCC;
}
.pgSearchInfo {
margin-left:20px;
}
.mask {
width: 100%;
height: 100%;
background: url(../images/loading.gif) no-repeat center;
background-color: #FFFFFF;
position: absolute;
zIndex: 999;
top:0;
left:0;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:.70;
}
.cleanFloat {
clear:both;
display:none;
}
.separator {
width:2px;
height:30px;
margin:0 5px 0 5px;
background: url(../images/separator.gif) no-repeat center;
}
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc;
}
tr.over td {
background:#bcd4ec;
}
2.扩展的Jquery插件
jQuery.fn.pagination = function(config){
init("#"+this.attr("id"),config);
}
function init(t,config){
var totalRecord = config.totalRecord > 0 ? config.totalRecord : 0;//总记录数
if(totalRecord == 0){
$(t).css("text-align","center");
$(t).css("line-height","50px");
$(l("很遗憾，没有检索到任何记录！");
return;
}
var configPage = config.perPage > 0 ? config.perPage : 10;
var perPage = okie(t+"_perPage") == null ? configPage : parseInt(okie(t+"_perPage"));//每页显示记录数
var proxyUrl = config.proxyUrl;//请求发送地址
var groupSize = config.groupSize;//组大小
var barPosition = config.barPosition == null ? 'bottom' : config.barPosition;//工具条位置
var ajaxParam = config.ajaxParam; //ajax的请求参数
//私有变量
var totalPage = Math.ceil(totalRecord/perPage);//总页数
var currentPage = okie(t+"_currentPage") == null ? 1 : parseInt(okie(t+"_currentPage"));//当前页码
var startRecord;//每页起始记录
var endRecord;//每页结束记录
var gpStartPage;
var gpEndPage;
var gpStartRecord;
var gpEndRecord;
//数据容器
var container = '<div class="pgContainer"></div>'
//添加工具条
var toolbar = '<div class="pgToolbar">';
toolbar += '<div class="pgPanel">';
toolbar += '<div><select class="pgPerPage">';
if(config.perPage>0)
toolbar += '<option value="'+config.perPage+'">'+config.perPage+'</option>';
toolbar += '<option value="5">5</option>';
toolbar += '<option value="10">10</option>';
toolbar += '<option value="15">15</option>';
toolbar += '<option value="20">20</option>';
toolbar += '<option value="25">25</option>';
toolbar += '<option value="40">40</option>';
toolbar += '</select> </div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgBtn pgFirst" title="首页"></div>';
toolbar += '<div class="pgBtn pgPrev" title="上页"></div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div>第 <input class="pgCurrentPage" type="text" value="' + currentPage + '" title="页码" /> 页 / 共 <span class="pgTotalPage">' + totalPage + '</span> 页</div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgBtn pgNext" title="下页"></div>';
toolbar += '<div class="pgBtn pgLast" title="尾页"></div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgBtn pgRefresh" title="刷新"></div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgSearchInfo">检索到 ' + totalRecord + ' 条记录，显示第 <span class="pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="pgEndRecord">' + endRecord + '</span> 条记录</div>';
toolbar += '<hr class="cleanFloat" /></div>';
toolbar += '</div>';
if(perPage<totalRecord)
$(l(container+toolbar);
else
$(l(container);
var btnRefresh = $(t+" .pgRefresh");//刷新按钮
var btnNext =$(t+" .pgNext");//下一页按钮
var btnPrev = $(t+" .pgPrev");//上一页按钮
var btnFirst = $(t+" .pgFirst");//首页按钮
var btnLast = $(t+" .pgLast");//末页按钮
var btnGo = $(t+" .pgNext,"+t+" .pgLast");
var btnBack = $(t+" .pgPrev,"+t+" .pgFirst");
var btn = $(t+" .pgFirst,"+t+" .pgPrev,"+t+" .pgNext,"+t+" .pgLast");
var mask;
var valCurrentPage = $(t+" .pgCurrentPage");
var valStartRecord = $(t+" .pgStartRecord");
var valEndRecord =$(t+" .pgEndRecord");
var valContainer = $(t+" .pgContainer");
var valPerPage = $(t+" .pgPerPage");
var valTotalPage = $(t+" .pgTotalPage");
$(t+" .pgPerPage").attr("value",perPage);
getGroupStartEnd();
getStartEnd();
getRemoteData();
//刷新按钮监听
btnRefresh.bind("mousedown",pressHandler).bind("mouseup",unpressHandler).bind("mouseout",unpressHandler);
//刷新工具栏
refresh();
//按钮监听
//点击"下一页"按钮
btnNext.click(
function(){
if(currentPage < totalPage){
currentPage += 1;
getStartEnd();
getRemoteData();
}
}
);
//点击"前一页"按钮
btnPrev.click(
function(){
if(currentPage > 1){
currentPage -= 1;
getStartEnd();
getRemoteData();
}
}
);
//点击"首页"按钮
btnFirst.click(
function(){
if(currentPage > 1){
currentPage = 1;
getStartEnd();
getRemoteData();
}
}
);
//最后一页
btnLast.click(
function(){
if(currentPage < totalPage){
currentPage = totalPage;
getStartEnd();
getRemoteData();
}
}
);
btnRefresh.click(
function(){
getStartEnd();
getRemoteData();
}
);
//页码输入框监听
valCurrentPage.keydown(
function(){
var targetPage = parseInt($(this).val());
if(event.keyCode==13 && targetPage>=1 && targetPage<=totalPage){
currentPage = targetPage;
getStartEnd();
getRemoteData();
}
}
);
valPerPage.change(
function(){
perPage = parseInt($(this).val());
currentPage = 1;
totalPage = Math.ceil(totalRecord/perPage);
getStartEnd();
getRemoteData();
}
);
/*********************************init私有函数***************************************************/
/**
* 置为正在检索状态
*/
function startLoad(){
$(t).addClass("container");
mask = document.createElement('div');
$(mask).addClass("mask");
$(mask).css("height",$(t).height());
$(t).append(mask);
$(t+" .pgRefresh").addClass("pgLoad");
$(t+" .pgSearchInfo"l("正在检索中，请稍后...");
}
/**
* 置为结束检索状态
*/
function overLoad(){
$(t+" .pgRefresh").removeClass("pgLoad");
$(t+" .pgSearchInfo"l('检索到 ' + totalRecord + ' 条记录，显示第 <span class="pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="pgEndRecord">' + endRecord + '</span> 条记录');
//$(mask).remove();
$(mask).fadeOut("slow");
}
/**
* 获得远程数据
*/
/** function getRemoteData(){
startLoad();
$.ajax(
{
type: "POST",
url: proxyUrl,
cache: false,
data: {current:currentPage,perPage:perPage},
dataType: "html",
timeout: 30000,
success: function(msg){
getStartEnd();
loadData(msg);
refresh();
overLoad();
},
error: function(){
alert("请求失败或超时，请稍后再试！");
overLoad();
return;
}
}
)
}
/**
* 获得当前页开始结束记录
*/
function getRemoteData(){
startLoad();
$.ajax(
{
type: "GET",
url: proxyUrl,
cache: false,
data: {current:currentPage,perPage:perPage},
dataType: "json",
timeout: 30000,
success: function(json){
var len=json.length;
var msg="";
msg="<table width=100% class='stripe' border='0' cellspacing='0 cellpadding='0><tr><th>名称</th><th>url地址</th><th>帮助id</th></tr>";
for(var i=0;i<json.length;i++)
{
msg+="<tr><td width=30%>"+json[i].name+"</td>";
msg+="<td width=50%>"+json[i].url+"</td>";
msg+="<td width=20%>"+json[i].helpTopicId+"</td></tr>";
}
msg+="</table>";
getStartEnd();
loadData(msg);
refresh();
overLoad();
},
error: function(){
alert("请求失败或超时，请稍后再试！");
overLoad();
return;
}
}
)
}
function getStartEnd(){
startRecord = (currentPage-1)*perPage+1;
endRecord = Math.min(currentPage*perPage,totalRecord);
}
/**
* 获得当前组开始结束页码
*/
function getGroupStartEnd(){
if(groupSize==null)
return;
var groupId = Math.ceil(currentPage/groupSize);
gpStartPage = (groupId-1)*groupSize+1;
gpEndPage = Math.min(groupId*groupSize,totalPage);
gpStartRecord = (gpStartPage-1)*perPage+1;
gpEndRecord = Math.min(gpEndPage*perPage,totalRecord);
}
/**
* 刷新数据容器
*/
function loadData(msg){
l(msg);
}
/**
* 刷新工具栏状态
*/
function refresh(){
//当前页码写入cookie
okie(t+'_currentPage', currentPage);
okie(t+'_perPage', perPage);
valCurrentPage.val(currentPage);//当前页
l(startRecord);//开始记录
l(endRecord);//结束记录
l(totalPage);//总页数
btn.unbind("mousedown",pressHandler);//取消鼠标按下的功能
btn.bind("mouseup",unpressHandler);//绑定
btn.bind("mouseout",unpressHandler);
if(currentPage == totalPage){
enabled();
btnBack.bind("mousedown",pressHandler);
btnNext.addClass("pgNextDisabled");
btnLast.addClass("pgLastDisabled");
}else if(currentPage == 1){
enabled();
btnGo.bind("mousedown",pressHandler);
btnPrev.addClass("pgPrevDisabled");
btnFirst.addClass("pgFirstDisabled");
}else{
enabled();
btnBack.bind("mousedown",pressHandler);
btnGo.bind("mousedown",pressHandler);
btnNext.addClass("pgNext");
btnPrev.addClass("pgPrev");
btnFirst.addClass("pgFirst");
btnLast.addClass("pgLast");
}
}
/**
* 移除按钮disabled状态样式
*/
function enabled(){
btnNext.removeClass("pgNextDisabled");
btnPrev.removeClass("pgPrevDisabled");
btnFirst.removeClass("pgFirstDisabled");
btnLast.removeClass("pgLastDisabled");
}
/**
* 添加按钮按下状态样式
*/
function pressHandler(){
$(this).addClass("pgPress");
}
/**
* 移除按钮按下状态样式
*/
function unpressHandler(){
$(this).removeClass("pgPress");
}
}
3.JSP页面最简单的代码
</style>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquerycookie.js"></script>
<script type="text/javascript" src="../../js/pagination.js"></script>
<script language="javascript">
$(document).ready(
function(){
$("#pagetest").pagination({totalRecord:${p},proxyUrl:'data.action'});
});
</script>
</head>
<body>
<div >
<div id="pagetest" ></div>
<hr />
</div>
</body>
