/** * jpage for jQuery分页插件 * 功能: * 1.指定页数内静态分页 * 2.超过指定页数后ajax请求下一组静态分页 * 3.支持cookie记录当前页码和分组大小 * * 注:依赖xmlutil.js * * @author 陈健 * @version 2.1 * @date 2011-10-10 * @param config 插件配置 */ jQuery.fn.jpage = function(config){ init("#"+this.attr("id"),config); /** * 初始化,主程序 * @param t 容器的ID,带#号 * @param config 插件配置 */ function init(t,config){ //公有变量 if(!t) return; var dataStore; var xmlStore; var initStore = config.dataStore; //初始数据 if(initStore){ initStore = initStore.replace(//g,'').replace(/<\/RECORD>/g,''); xmlStore = $($.createXMLDoc(initStore)); 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; //组大小 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 startRecord; //每页起始记录,相对于当前组 var endRecord; //每页结束记录,相对于当前组 var gpStartPage; //组开始页 var gpEndPage; //组结束页 var gpStartRecord = 1; //组开始记录 var gpEndRecord = perPage * groupSize; //数据容器 var container = '
'; //添加工具条 var toolbar = '
'; toolbar += ''; 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 += '
 
页 / 共 ' + totalPage + '
/ ' + totalPage + '
检索到 ' + totalRecord + ' 条记录,显示第 ' + startRecord + ' 条 - 第 ' + endRecord + ' 条记录
'; toolbar += '
'; if(configPage 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(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(); } } } ); 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: 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("请求失败或超时,请稍后再试!"); 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; 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","center"); valContainer.css("line-height","50px"); valContainer.html("没有检索到任何记录!"); return; } var view = ""; for(var i=startRecord-1;i<=endRecord-1;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"); btnFirst.addClass(themeName+"_pgFirstDisabled"); }else if(currentPage != 1 && currentPage == totalPage){ enabled(); btnBack.bind("mousedown",pressHandler); btnNext.addClass(themeName+"_pgNextDisabled"); btnLast.addClass(themeName+"_pgLastDisabled"); }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"); btnPrev.removeClass(themeName+"_pgPrevDisabled"); btnFirst.removeClass(themeName+"_pgFirstDisabled"); btnLast.removeClass(themeName+"_pgLastDisabled"); } /** * 添加按钮disabled状态样式 */ function disabled(){ btnNext.addClass(themeName+"_pgNextDisabled"); btnPrev.addClass(themeName+"_pgPrevDisabled"); btnFirst.addClass(themeName+"_pgFirstDisabled"); btnLast.addClass(themeName+"_pgLastDisabled"); } /** * 添加按钮按下状态样式 */ function pressHandler(){ $(this).addClass(themeName+"_pgPress"); } /** * 移除按钮按下状态样式 */ function unpressHandler(){ $(this).removeClass(themeName+"_pgPress"); } } };