/**
* jQuery分页插件
* 功能：指定页数内静态分页，超过指定页数后ajax请求下一组静态分页
* @version 1.0 beta
* @date 2008-04-14
* @param config 插件配置
*/
jQuery.fn.pagination = function(config){
init("#"+this.attr("id"),config);
}
/**
* 初始化，主程序
* @param t 容器的ID，带#号
* @param config 插件配置
*/
function init(t,config){
//公有变量
var dataStore = config.dataStore; //数据
var totalRecord = config.totalRecord > 0 ? config.totalRecord : 0; //总记录数
if(totalRecord == 0){
$(t).css("text-align","center");
$(t).css("line-height","50px");
$(t).html("很遗憾，没有检索到任何记录！");
return;
}
var configPage = config.perPage > 0 ? config.perPage : 10;
var perPage = $.cookie(t+"_perPage") == null ? configPage : parseInt($.cookie(t+"_perPage")); //每页显示记录数
var proxyUrl = config.proxyUrl > 0 ? config.proxyUrl : 'pgdataproxy.jsp'; //数据代理地址
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 = $.cookie(t+"_currentPage") == null ? 1 : parseInt($.cookie(t+"_currentPage")); //当前页码
var startRecord; //每页起始记录
var endRecord; //每页结束记录
var gpStartPage;
var gpEndPage;
var gpStartRecord;
var gpEndRecord;
//数据容器
var container = ''
//添加工具条
var toolbar = '';
if(perPage 1){
if(!dataStore || currentPage == gpStartPage){
currentPage -= 1;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage -= 1;
getStartEnd();
loadData();
refresh();
}
}
}
);
btnFirst.click(
function(){
if(!dataStore || currentPage > 1){
if(gpStartPage > 1){
currentPage = 1;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage = 1;
getStartEnd();
loadData();
refresh();
}
}
}
);
btnLast.click(
function(){
if(!dataStore || currentPage < totalPage){
if(gpEndPage > 0 && gpEndPage < totalPage){
currentPage = totalPage;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage = totalPage;
getStartEnd();
loadData();
refresh();
}
}
}
);
btnRefresh.click(
function(){
getGroupStartEnd();
getStartEnd();
getRemoteData();
}
);
//页码输入框监听
valCurrentPage.keydown(
function(){
var targetPage = parseInt($(this).val());
if(event.keyCode==13 && targetPage>=1 && targetPage<=totalPage){
if(!dataStore || gpStartPage > targetPage || (gpEndPage > 0 && gpEndPage < targetPage)){
currentPage = targetPage;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage = targetPage;
getStartEnd();
loadData();
refresh();
}
}
}
);
valPerPage.change(
function(){
perPage = parseInt($(this).val());
currentPage = 1;
totalPage = Math.ceil(totalRecord/perPage);
if(groupSize){
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
getStartEnd();
loadData();
refresh();
}
}
);
/*********************************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").html("正在检索中，请稍后...");
}
/**
* 置为结束检索状态
*/
function overLoad(){
$(t+" .pgRefresh").removeClass("pgLoad");
$(t+" .pgSearchInfo").html('检索到 ' + totalRecord + ' 条记录，显示第 ' + startRecord + ' 条 - 第 ' + endRecord + ' 条记录');
$(mask).remove();
//$(mask).fadeOut("slow");
}
/**
* 获得远程数据
*/
function getRemoteData(){
startLoad();
$.ajax(
{
type: "POST",
url: proxyUrl + "?startrecord="+gpStartRecord+"&endrecord="+gpEndRecord ,
cache: false,
data: ajaxParam,
dataType: "script",
timeout: 30000,
success: function(msg){
eval(msg);
getStartEnd();
loadData();
refresh();
overLoad();
},
error: function(){
alert("请求失败或超时，请稍后再试！");
overLoad();
return;
}
}
)
}
/**
* 获得当前页开始结束记录
*/
function getStartEnd(){
if(groupSize){
startRecord = (currentPage-1)*perPage+1 - gpStartRecord + 1;
endRecord = Math.min(currentPage*perPage,totalRecord) - gpStartRecord + 1;
}else{
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(){
var view = "";
for(var i=startRecord-1;i<=endRecord-1;i++)
view += dataStore[i];
valContainer.html(view);
}
/**
* 刷新工具栏状态
*/
function refresh(){
//当前页码写入cookie
$.cookie(t+'_currentPage', currentPage);
$.cookie(t+'_perPage', perPage);
valCurrentPage.val(currentPage);
valStartRecord.html(startRecord);
valEndRecord.html(endRecord);
valTotalPage.html(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");
}
}
pgdataproxy.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@page import="java.net.URLDecoder"%>
<%@page import="java.awt.Robot"%>
<%
if(request.getParameter("money")!=null){
String a = request.getParameter("money");
System.out.println(URLDecoder.decode(a,"UTF-8"));
}
int start = Integer.parseInt(request.getParameter("startrecord"));
int end = Integer.parseInt(request.getParameter("endrecord"));
List store = (List)session.getAttribute( "news" );
String content = "dataStore = [";
for(int i=start-1;i
/*action传到此jsp页面一个list即可*/
page.jsp
//==============展示jQuery分页效果页面==========================
<%@ page language="java" import="java.util.*" pageEncoding="GBK" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
jQuery Ajax分页
Demo1（底部显示工具条）: