/** * jpage for jQuery分頁插件 * 功能:指定頁數內靜態分頁,超過指定頁數後ajax請求下一組靜態分頁 * @author 陳健 * @version 1.0 beta 7 * @date 2008-07-08 * @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 = 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 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 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 themeName = config.themeName == null || config.themeName == '' ? 'default' : config.themeName; //主題名稱 var dataBefore = config.dataBefore == null ? '' : config.dataBefore; var dataAfter = config.dataAfter == null ? '' : config.dataAfter; //私有變量 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; //組結束記錄 //數據容器 var container = '
'; //添加工具條 var toolbar = '
'; toolbar += ''; /* if(showMode == 'full'){ 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(){ 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 + ' 條 - 第 ' + endRecord + ' 條記錄'); $(mask).remove(); } /** * 獲得遠程數據 */ function getRemoteData(){ startLoad(); $.ajax( { type: "POST", url: proxyUrl + "?startrecord="+gpStartRecord+"&endrecord="+gpEndRecord+"&perpage="+perPage , 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].replace("{id}",gpStartRecord+i); } valContainer.html(dataBefore + view + dataAfter); } /** * 刷新工具欄狀態 */ function refresh(){ if(openCookies){ //當前頁碼寫入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 == 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"); } } }