/** * jpage for jquery分页插件 * 功能： * 1.指定页数内静态分页 * 2.超过指定页数后ajax请求下一组静态分页 * 3.支持cookie记录当前页码和分组大小 * 4.支持浏览器前进后退 * 5.搜索引擎抓取 * @author 陈健 * @version 3.0 * @date 2015-06-25 * @param config 插件配置 */ (function(){ var i18n = { 'zh-cn' : { norecord: '没有检索到任何记录！', error: '请求失败或超时，请稍后再试！' }, 'zh-tw' : { norecord: '沒有檢索到任何記錄！', error: '請求失敗或超時，請稍後再試！' } } function getlang(langtype) { return i18n[langtype]; } 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 lang = typeof zh_choose != 'undefined' && zh_choose == 't' ? getlang('zh-tw') : getlang('zh-cn'); 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(lang.norecord); 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 searchstart = config.ajaxparam.searchstart; 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; } if(searchstart*1==1){ currentpage = 1; } var startrecord; //每页起始记录，相对于当前组 var endrecord; //每页结束记录，相对于当前组 var gpstartpage; //组开始页 var gpendpage; //组结束页 var gpstartrecord = 1; //组开始记录 var gpendrecord = perpage * groupsize; //数据容器 var container = '
'; //添加工具条 var toolbar = '
'; if(themename == 'lucidity_en'){ toolbar += ''; }else{ toolbar += '
'; } if(themename == 'lucidity'){ formattoolbarforlucidity(); }else if(themename == 'lucidity_en'){ formattoolbarforlucidityen(); }else{ formattoolbar() } //扁平（英文版） function formattoolbarforlucidityen() { toolbar += ''; toolbar += ''; toolbar += ''; toolbar += ''; toolbar += ''; if(groupsize){ toolbar += ''; toolbar += ''; } if(showmode == 'full'){ toolbar += ''; toolbar += ''; }else if(showmode == 'normal'){ toolbar += ''; toolbar += ''; } } function formattoolbarforlucidity() { toolbar += ''; toolbar += ''; toolbar += ''; toolbar += ''; toolbar += ''; if(groupsize){ toolbar += ''; toolbar += ''; } toolbar += ''; if(showmode == 'full'){ toolbar += ''; toolbar += ''; }else if(showmode == 'normal'){ toolbar += ''; toolbar += ''; } } function formattoolbar() { if(showmode == 'full' && allowchangeperpage){ toolbar += ''; toolbar += ''; } toolbar += ''; toolbar += ''; if(showmode == 'full'){ toolbar += ''; toolbar += ''; toolbar += ''; }else if(showmode == 'normal'){ toolbar += ''; toolbar += ''; toolbar += ''; } toolbar += ''; toolbar += ''; if(groupsize){ toolbar += ''; toolbar += ''; } if(showmode == 'full'){ toolbar += ''; toolbar += ''; } } toolbar += '
firstprev
nextlast
refresh
total:' + totalpage + '
 / ' + totalpage + ' page首 页上一页
下一页尾 页
刷 新
  共 ' + totalrecord + ' 条
第 页 / 共 ' + totalpage + ' 页
 / ' + totalpage + ' 页 
第 页 / 共 ' + totalpage + ' 页
 / ' + totalpage + ' 页
检索到 ' + totalrecord + ' 条记录，显示第 ' + startrecord + ' 条 - 第 ' + endrecord + ' 条记录
'; toolbar += '
'; if(configpage 6) { html += '
  • 1
    • '; if (currentpage <= 2) { html += '
  • 2
    • '; html += '
  • 3
    • '; html += '
  • ' + ellipsetpl + '
    • '; } else if (currentpage > 2 && currentpage <= totalpage - 2) { if (currentpage > 3) { html += '
  • ' + ellipsetpl + '
    • '; } html += '
  • ' + (currentpage - 1) + '
    • '; html += '
  • ' + currentpage + '
    • '; html += '
  • ' + (currentpage + 1) + '
    • '; if (currentpage < totalpage - 2) { html += '
  • ' + ellipsetpl + '
    • '; } } else { html += '
  • ' + ellipsetpl + '
    • '; for (var i = totalpage - 2; i < totalpage; i++) { html += '
  • ' + i + '
    • ' } } html += '
  • ' + totalpage + '
    • '; } else { for (var i = 1; i <= totalpage; i++) { html += '
  • ' + i + '
    • ' } } html += ''; edittool.html(html); edittool.find('li[data-page="' + currentpage + '"]').addclass('focus').siblings().removeclass('focus'); } /*else if(themename == 'lucidity_en'){ var edittool = $(t + " ."+ themename + '-ui-paging-container'); var html = ''; edittool.html(html); edittool.find('li[data-page="' + currentpage + '"]').addclass('focus').siblings().removeclass('focus'); }*/ } function go(p) { currentpage = p || currentpage; currentpage = math.max(1, currentpage); currentpage = math.min(currentpage, totalpage); if(!datastore || gpstartpage > currentpage || (gpendpage > 0 && gpendpage < currentpage)){ getgroupstartend(); getstartend(); getremotedata(); }else{ getstartend(); loaddata(); refresh(); } formattool(); var hashparams = {uid: containerid}; hashparams.pagenum = currentpage; pushstate(hashparams); modifybtnlink(hashparams); } var btnrefresh = $(t+" ."+themename+"_pgrefresh"); //刷新按钮 var btnnext =$(t+" ."+themename+"_pgnext"); //下一页按钮 var btnprev = $(t+" ."+themename+"_pgprev"); //上一页按钮 var btnfirst = $(t+" ."+themename+"_pgfirst"); //首页按钮 var btnlast = $(t+" ."+themename+"_pglast"); //末页按钮 var btngo = $(t+" ."+themename+"_pgnext,"+t+" ."+themename+"_pglast"); var btnback = $(t+" ."+themename+"_pgprev,"+t+" ."+themename+"_pgfirst"); var btn = $(t+" ."+themename+"_pgfirst,"+t+" ."+themename+"_pgprev,"+t+" ."+themename+"_pgnext,"+t+" ."+themename+"_pglast"); var mask; var valcurrentpage = $(t+" ."+themename+"_pgcurrentpage"); var valstartrecord = $(t+" ."+themename+"_pgstartrecord"); var valendrecord =$(t+" ."+themename+"_pgendrecord"); var valcontainer = $(t+" ."+themename+"_pgcontainer"); var valperpage = $(t+" ."+themename+"_pgperpage"); var valtotalpage = $(t+" ."+themename+"_pgtotalpage"); $(t+" ."+themename+"_pgperpage").attr("value",perpage); getgroupstartend(); getstartend(); if(datastore==null || datastore.length == 0 || perpage!=configpage || currentpage>groupsize) 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(); } } formattool(); var hashparams = {uid: containerid}; hashparams.pagenum = currentpage; pushstate(hashparams); modifybtnlink(hashparams); return false; } ); btnprev.click( function(){ if(currentpage > 1){ if(!datastore || currentpage == gpstartpage){ currentpage -= 1; getgroupstartend(); getstartend(); getremotedata(); }else{ currentpage -= 1; getstartend(); loaddata(); refresh(); } } formattool(); var hashparams = {uid: containerid}; hashparams.pagenum = currentpage; pushstate(hashparams); modifybtnlink(hashparams); return false; } ); btnfirst.click( function(){ if(!datastore || currentpage > 1){ if(gpstartpage > 1){ currentpage = 1; getgroupstartend(); getstartend(); getremotedata(); }else{ currentpage = 1; getstartend(); loaddata(); refresh(); } } formattool(); var hashparams = {uid: containerid}; hashparams.pagenum = currentpage; pushstate(hashparams); modifybtnlink(hashparams); 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(); } } formattool(); var hashparams = {uid: containerid}; hashparams.pagenum = currentpage; pushstate(hashparams); modifybtnlink(hashparams); return false; } ); btnrefresh.click( function(){ getgroupstartend(); getstartend(); getremotedata(); formattool(); } ); //页码输入框监听 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(); } } formattool(); var hashparams = {uid: containerid}; hashparams.pagenum = currentpage; pushstate(hashparams); modifybtnlink(hashparams); } ); 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(); } } ); if (typeof zh_choose != 'undefined' && zh_choose == 't') {//转繁体 zh_tran('t'); } /*********************************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"); } /** * 置为结束检索状态 */ function overload(){ $(t+" ."+themename+"_pgrefresh").removeclass(themename+"_pgload"); $(t+" ."+themename+"_pgtotalrecord").text(totalrecord); $(t+" ."+themename+"_pgstartrecord").text(startrecord+gpstartrecord-1); $(t+" ."+themename+"_pgendrecord").text(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: 30000, 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(lang.error); 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){ valcontainer.css("text-align","left"); valcontainer.css("line-height","22px"); valcontainer.html(lang.norecord); 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); //刷新工具栏 formattool(); 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(hashparams) { var pagenum = hashparams.pagenum; hashparams.pagenum = pagenum + 1; btnnext.attr('href', geturl(hashparams)); hashparams.pagenum = totalpage; btnlast.attr('href', geturl(hashparams)); hashparams.pagenum = pagenum - 1; btnprev.attr('href', geturl(hashparams)); hashparams.pagenum = 1; btnfirst.attr('href', geturl(hashparams)); } } /** * 创建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(hashparams) { var pageurl = location.pathname; var pageparams = getpageparams(hashparams); if (canpushstate) { pageurl += '?' + $.param($.extend(pageparams, hashparams)); } else { if (pageparams) { pageurl += '?' + $.param(pageparams); } pageurl += '#!' + $.param(hashparams); } return pageurl; } /** * 获取url中原查询参数json */ function getpageparams(hashparams) { var pageurl = location.href; var pagequerystr = pageurl.split(/\?/)[1]; var pageparams = null; if (pagequerystr) { pageparams = {}; var hashindex = pagequerystr.indexof('#!'); if (hashindex != -1) { pagequerystr = pagequerystr.substr(0, hashindex); } var pageparamsarray = pagequerystr.split('&'); for (var i in pageparamsarray) { if(hashparams && hashparams[i]){ continue; } var pageparam = pageparamsarray[i].split('='); pageparams[pageparam[0]] = unescape(pageparam[1]); } } return 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(hashparams) { var separate = canpushstate ? '?' : '#' if (canpushstate) { window.history.pushstate(null, null, geturl(hashparams)); } else { window.location.hash = '#!' + $.param(hashparams); } } }; })(jquery);