/**
* jpage for jQuery分页插件
* 功能:
* 1.指定页数内静态分页
* 2.超过指定页数后ajax请求下一组静态分页
* 3.支持cookie记录当前页码和分组大小
* 4.支持浏览器前进后退
* 5.搜索引擎抓取
* @author 陈健
* @version 3.0
* @date 2015-06-25
* @param config 插件配置
*/
jQuery.fn.jpage = function(config){
var canPushState = Boolean(window.history.pushState);//是否支持pushState
var containerId = this.attr("id");
init("#"+containerId,config);
/**
* 初始化,主程序
* @param t 容器的ID,带#号
* @param config 插件配置
*/
function init(t,config){
//公有变量
if(!t)
return;
var initStore = config.dataStore; //初始数据
var xmlStore = $(createXMLDocument(initStore));
var dataStore = new Array();
xmlStore.find('record').each(
function(){
dataStore.push($(this).text());
}
);
var openCookies = config.openCookies != null ? config.openCookies : true;
var configPage = config.perPage > 0 ? config.perPage : 10;
var perPage = !openCookies || $.cookie(t+"_perPage") == null ? configPage : parseInt($.cookie(t+"_perPage")); //每页显示记录数
var totalRecord = config.totalRecord; //总记录数
if(totalRecord==undefined)
totalRecord = 0;
else{
totalRecord = config.totalRecord > 0 ? config.totalRecord : 0;
if(totalRecord == 0){
$(t).css("text-align","center");
$(t).css("line-height","50px");
$(t).html("没有检索到任何记录!");
return;
}
}
var proxyUrl = config.proxyUrl != null ? config.proxyUrl : 'dataproxy.jsp'; //数据代理地址
var groupSize = config.groupSize != null ? config.groupSize : 1; //组大小
var barPosition = config.barPosition == null || config.barPosition == ""? 'bottom' : config.barPosition; //工具条位置
var ajaxParam = config.ajaxParam; //ajax的请求参数
var showMode = config.showMode == null || config.showMode == '' ? 'full' : config.showMode; //显示模式
var allowChangePerPage = config.allowChangePerPage == null || config.allowChangePerPage ? true : false; //是否允许切换每页显示数
var themeName = config.themeName == null || config.themeName == '' ? 'default' : config.themeName; //主题名称
var dataBefore = config.dataBefore == null ? '' : config.dataBefore;
var dataAfter = config.dataAfter == null ? '' : config.dataAfter;
var callBack = config.callBack == null ? function(){} : config.callBack;
//私有变量
var totalPage = Math.ceil(totalRecord/perPage); //总页数
var currentPage = !openCookies || $.cookie(t+"_currentPage") == null ? 1 : parseInt($.cookie(t+"_currentPage"));//当前页码
var uid = getUrlParam('uid');
if (uid == containerId) {
currentPage = parseInt(getUrlParam('pageNum'));
}
if(currentPage>totalPage){
currentPage=totalPage;
}
var startRecord; //每页起始记录,相对于当前组
var endRecord; //每页结束记录,相对于当前组
var gpStartPage; //组开始页
var gpEndPage; //组结束页
var gpStartRecord = 1; //组开始记录
var gpEndRecord = perPage * groupSize;
//数据容器
var container = '
';
//添加工具条
var toolbar = '';
if(configPagegroupSize)
getRemoteData();
else{
getStartEnd();
loadData();
refresh();
}
//浏览器前进后退
function browserChangePage() {
uid = getUrlParam('uid');
var targetPage;
if (uid == containerId) {
targetPage = parseInt(getUrlParam('pageNum'));
} else {
targetPage = 1;
}
if(!dataStore || (targetPage > currentPage && currentPage == gpEndPage) || (targetPage < currentPage && currentPage == gpStartPage)){
currentPage = targetPage;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage = targetPage;
getStartEnd();
loadData();
refresh();
}
}
if (canPushState) {//HTML5支持pushSate
window.addEventListener('popstate', browserChangePage);
} else {
window.onhashchange = browserChangePage;
}
//刷新按钮监听
btnRefresh.bind("mousedown",pressHandler).bind("mouseup",unpressHandler).bind("mouseout",unpressHandler);
//按钮链接
modifyBtnLink({
uid: containerId,
pageNum: currentPage
});
//刷新工具栏
refresh();
//按钮监听
btn.click(
function() {
if ($(this).is('[disabled]')) {
return false;
}
btn.removeAttr('href');
}
);
btnNext.click(
function(){
if(currentPage < totalPage){
if(!dataStore || currentPage == gpEndPage){
currentPage += 1;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage += 1;
getStartEnd();
loadData();
refresh();
}
}
var pageParams = {uid: containerId};
pageParams.pageNum = currentPage;
pushState(pageParams);
modifyBtnLink(pageParams);
return false;
}
);
btnPrev.click(
function(){
if(currentPage > 1){
if(!dataStore || currentPage == gpStartPage){
currentPage -= 1;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage -= 1;
getStartEnd();
loadData();
refresh();
}
}
var pageParams = {uid: containerId};
pageParams.pageNum = currentPage;
pushState(pageParams);
modifyBtnLink(pageParams);
return false;
}
);
btnFirst.click(
function(){
if(!dataStore || currentPage > 1){
if(gpStartPage > 1){
currentPage = 1;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage = 1;
getStartEnd();
loadData();
refresh();
}
}
var pageParams = {uid: containerId};
pageParams.pageNum = currentPage;
pushState(pageParams);
modifyBtnLink(pageParams);
return false;
}
);
btnLast.click(
function(){
if(!dataStore || currentPage < totalPage){
if(gpEndPage > 0 && gpEndPage < totalPage){
currentPage = totalPage;
getGroupStartEnd();
getStartEnd();
getRemoteData();
}else{
currentPage = totalPage;
getStartEnd();
loadData();
refresh();
}
}
var pageParams = {uid: containerId};
pageParams.pageNum = currentPage;
pushState(pageParams);
modifyBtnLink(pageParams);
return false;
}
);
btnRefresh.click(
function(){
getGroupStartEnd();
getStartEnd();
getRemoteData();
}
);
//页码输入框监听
valCurrentPage.keydown(
function(event){
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();
}
}
var pageParams = {uid: containerId};
pageParams.pageNum = currentPage;
pushState(pageParams);
modifyBtnLink(pageParams);
}
);
valPerPage.change(
function(){
valPerPage.val($(this).val());
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(themeName+"_container");
mask = document.createElement('div');
$(mask).addClass(themeName+"_mask");
$(mask).css("height",$(t).height());
$(t).append(mask);
$(t+" ."+themeName+"_pgRefresh").addClass(themeName+"_pgLoad");
$(t+" ."+themeName+"_pgSearchInfo").html("正在检索中,请稍后...");
}
/**
* 置为结束检索状态
*/
function overLoad(){
$(t+" ."+themeName+"_pgRefresh").removeClass(themeName+"_pgLoad");
$(t+" ."+themeName+"_pgSearchInfo").html('检索到 ' + totalRecord + ' 条记录,显示第 ' + (startRecord+gpStartRecord-1) + ' 条 - 第 ' + (endRecord+gpStartRecord-1) + ' 条记录');
$(mask).remove();
$(t).removeClass(themeName+"_container");
valStartRecord = $(t+" ."+themeName+"_pgStartRecord");
valEndRecord =$(t+" ."+themeName+"_pgEndRecord");
}
/**
* 获得远程数据
*/
function getRemoteData(){
startLoad();
$.ajax(
{
type: "POST",
url: proxyUrl + "?startrecord="+gpStartRecord+"&endrecord="+gpEndRecord+"&perpage="+perPage,
cache: false,
data: ajaxParam,
dataType: "xml",
timeout: 600000,
success: function(xml){
xmlStore = $(xml);
totalRecord = xmlStore.find('totalrecord').text();
totalPage = xmlStore.find('totalpage').text();
dataStore = null;
dataStore = new Array();
xmlStore.find('record').each(
function(){
dataStore.push($(this).text());
}
);
if(totalRecord==0)
$('.'+themeName+'_pgToolbar').remove();
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 = groupSize > 0 ? Math.ceil(currentPage/groupSize) : 0;
gpStartPage = (groupId-1)*groupSize+1;
if(totalRecord > 0){
gpEndPage = Math.min(groupId*groupSize,totalPage);
}
gpStartRecord = (gpStartPage-1)*perPage+1;
if(totalRecord > 0){
gpEndRecord = Math.min(gpEndPage*perPage,totalRecord);
}
}
/**
* 刷新数据容器
*/
function loadData(){
if(dataStore==null||dataStore.length==0||dataStore[0]=="没有检索到任何记录"){
valContainer.css("text-align","left");
valContainer.css("line-height","22px");
valContainer.html("没有检索到任何记录!");
return;
}
var view = "";
for(var i=startRecord-1;i<=endRecord-1 && i < dataStore.length;i++){
view += dataStore[i].replace("{id}",gpStartRecord+i);
}
valContainer.html(dataBefore + view + dataAfter);
//翻页回调函数
callBack();
}
/**
* 刷新工具栏状态
*/
function refresh(){
if(openCookies){
//当前页码写入cookie
$.cookie(t+'_currentPage', currentPage);
$.cookie(t+'_perPage', perPage);
}
valCurrentPage.val(currentPage);
valStartRecord.html(startRecord+gpStartRecord-1);
valEndRecord.html(endRecord+gpStartRecord-1);
valTotalPage.html(totalPage);
btn.unbind("mousedown",pressHandler);
btn.bind("mouseup",unpressHandler);
btn.bind("mouseout",unpressHandler);
if(currentPage == 1 && currentPage != totalPage){
enabled();
btnGo.bind("mousedown",pressHandler);
btnPrev.addClass(themeName+"_pgPrevDisabled").attr('disabled', 'disabled');
btnFirst.addClass(themeName+"_pgFirstDisabled").attr('disabled', 'disabled');
}else if(currentPage != 1 && currentPage == totalPage){
enabled();
btnBack.bind("mousedown",pressHandler);
btnNext.addClass(themeName+"_pgNextDisabled").attr('disabled', 'disabled');
btnLast.addClass(themeName+"_pgLastDisabled").attr('disabled', 'disabled');
}else if(currentPage == 1 && currentPage == totalPage){
disabled();
}else{
enabled();
btnBack.bind("mousedown",pressHandler);
btnGo.bind("mousedown",pressHandler);
btnNext.addClass(themeName+"_pgNext");
btnPrev.addClass(themeName+"_pgPrev");
btnFirst.addClass(themeName+"_pgFirst");
btnLast.addClass(themeName+"_pgLast");
}
}
/**
* 移除按钮disabled状态样式
*/
function enabled(){
btnNext.removeClass(themeName+"_pgNextDisabled").removeAttr('disabled');
btnPrev.removeClass(themeName+"_pgPrevDisabled").removeAttr('disabled');
btnFirst.removeClass(themeName+"_pgFirstDisabled").removeAttr('disabled');
btnLast.removeClass(themeName+"_pgLastDisabled").removeAttr('disabled');
}
/**
* 添加按钮disabled状态样式
*/
function disabled(){
btnNext.addClass(themeName+"_pgNextDisabled").attr('disabled', 'disabled');
btnPrev.addClass(themeName+"_pgPrevDisabled").attr('disabled', 'disabled');
btnFirst.addClass(themeName+"_pgFirstDisabled").attr('disabled', 'disabled');
btnLast.addClass(themeName+"_pgLastDisabled").attr('disabled', 'disabled');
}
/**
* 添加按钮按下状态样式
*/
function pressHandler(){
$(this).addClass(themeName+"_pgPress");
}
/**
* 移除按钮按下状态样式
*/
function unpressHandler(){
$(this).removeClass(themeName+"_pgPress");
}
/**
* 修改按钮链接
*/
function modifyBtnLink(pageParams) {
var pageNum = pageParams.pageNum;
pageParams.pageNum = pageNum + 1;
btnNext.attr('href', getUrl(pageParams));
pageParams.pageNum = totalPage;
btnLast.attr('href', getUrl(pageParams));
pageParams.pageNum = pageNum - 1;
btnPrev.attr('href', getUrl(pageParams));
pageParams.pageNum = 1;
btnFirst.attr('href', getUrl(pageParams));
}
}
/**
* 创建XML文档
*/
function createXMLDocument(text) {
var xmlDoc = null;
try{// Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(text);
}catch (e){
try{// Firefox, Mozilla, Opera, etc.
parser = new DOMParser();
xmlDoc = parser.parseFromString(text, "text/xml");
}catch (e) {
}
}
return xmlDoc;
}
/**
* 组装页面路径
*/
function getUrl(param) {
var pageUrl = location.pathname;
if (param) {
var pageParams = getPosition(param);
pageUrl += canPushState ? '?' : '#!';
pageUrl += pageParams;
}
return pageUrl;
}
/**
* 获取hash
*/
function getPosition(param, url) {
var pageUrl = location.href;
var pageQueryStr = pageUrl.split(/#!|\?/)[1];
var pageParams = {};
if (pageQueryStr) {
var pageParamsArray = pageQueryStr.split('&');
for (var i in pageParamsArray) {
if(i=="indexOf"){
continue;
}
var pageParam = pageParamsArray[i].split('=');
pageParams[pageParam[0]] = unescape(pageParam[1]);
}
}
$.extend(pageParams, param);
return $.param(pageParams);
}
/**
* 获取当前页面参数
* @param name
* @returns
*/
function getUrlParam(name, url) {
url = url ? url : location.href;
var reg = new RegExp("(#!|&|\\?)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = url.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
function pushState(pageParams) {
var separate = canPushState ? '?' : '#'
if (canPushState) {
if (pageParams.pageNum > 1) {
window.history.pushState(null, null, getUrl(pageParams));
} else {
window.history.pushState(null, null, getUrl());
}
} else {
if (pageParams.pageNum > 1) {
window.location.hash = '#!' + getPosition(pageParams);
} else {
window.location.hash = '';
}
}
}
};