?? page.js
字號:
jQuery.fn.jpage = function(config){
init("#"+this.attr("id"),config);
}
function init(t,config){
//公有變量
var totalRecord = config.totalRecord > 0 ? config.totalRecord : 0; //總記錄數
var perPage = config.perPage; //每頁顯示記錄數
var ajaxUrl = config.ajaxUrl ; //數據代理地址
var ajaxParam = config.ajaxParam; //ajax的請求參數
var dataBody = config.dataBody; //數據承載容器
var callback = config.callback;
var cookieName = config.cookieName //ajax成功后回調函數
//alert(config.callback.constructor);
//私有變量
var totalPage = Math.ceil(totalRecord/perPage); //總頁數
var currentPage = 1; //當前頁碼
var startRecord; //每頁起始記錄
var endRecord; //每頁結束記錄
//添加工具條
var toolbar = '';
toolbar += '<div class="pgPanel">';
toolbar += '<div>每頁 <input type="text" title="輸入后按回車確認" class="SmallInput pgPerPage" size="5" value="' + perPage +'"> 條</div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgBtn pgFirst" title="首頁"></div>';
toolbar += '<div class="pgBtn pgPrev" title="上頁"></div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div>第 <input class="SmallInput pgCurrentPage" size="5" type="text" value="' + currentPage + '" title="頁碼" /> 頁 / 共 <span class="pgTotalPage">' + totalPage + '</span> 頁</div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgBtn pgNext" title="下頁"></div>';
toolbar += '<div class="pgBtn pgLast" title="尾頁"></div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgBtn pgRefresh" title="刷新"></div>';
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgSearchInfo">檢索到 ' + totalRecord + ' 條記錄，顯示第 <span class="pgStartRecord">' + startRecord + '</span> 條 - 第 <span class="pgEndRecord">' + endRecord + '</span> 條記錄</div>';
toolbar += '</div>';
//alert(toolbar);
jQuery(t).html(toolbar);
var dataContainer =jQuery("#"+dataBody);
var btnRefresh = jQuery(t+" .pgRefresh"); //刷新按鈕
var btnNext =jQuery(t+" .pgNext"); //下一頁按鈕
var btnPrev = jQuery(t+" .pgPrev"); //上一頁按鈕
var btnFirst = jQuery(t+" .pgFirst"); //首頁按鈕
var btnLast = jQuery(t+" .pgLast"); //末頁按鈕
var btnGo = jQuery(t+" .pgNext,"+t+" .pgLast");
var btnBack = jQuery(t+" .pgPrev,"+t+" .pgFirst");
var btn = jQuery(t+" .pgFirst,"+t+" .pgPrev,"+t+" .pgNext,"+t+" .pgLast");
var valCurrentPage = jQuery(t+" .pgCurrentPage");
var valStartRecord = jQuery(t+" .pgStartRecord");
var valEndRecord =jQuery(t+" .pgEndRecord");
var valPerPage = jQuery(t+" .pgPerPage");
var valTotalPage = jQuery(t+" .pgTotalPage");
jQuery(t+" .pgPerPage").attr("value",perPage);
getStartEnd();
getRemoteData();
//刷新按鈕監聽
btnRefresh.bind("mousedown",pressHandler).bind("mouseup",unpressHandler).bind("mouseout",unpressHandler);
//刷新工具欄
refresh();
//按鈕監聽
btnNext.click(
function(){
if(currentPage < totalPage){
currentPage += 1;
getStartEnd();
getRemoteData();
refresh();
}
}
);
btnPrev.click(
function(){
if(currentPage > 1){
currentPage -= 1;
getStartEnd();
getRemoteData();
refresh();
}
}
);
btnFirst.click(
function(){
if(currentPage > 1){
currentPage = 1;
getStartEnd();
getRemoteData();
refresh();
}
}
);
btnLast.click(
function(){
if(currentPage < totalPage){
currentPage = totalPage;
getStartEnd();
getRemoteData();
refresh();
}
}
);
btnRefresh.click(
function(){
perPage = parseInt(valPerPage.val());
currentPage = 1;
totalPage = Math.ceil(totalRecord/perPage);
getStartEnd();
getRemoteData();
refresh();
}
);
//頁碼輸入框監聽
valCurrentPage.keydown(
function(){
var targetPage = parseInt(jQuery(this).val());
if(event.keyCode==13 && targetPage>=1 && targetPage<=totalPage){
currentPage = targetPage;
getStartEnd();
getRemoteData();
refresh();
}
}
);
valPerPage.keydown(
function(){
if(event.keyCode==13)
{
perPage = parseInt(jQuery(this).val());
if(perPage>99)
{
msg='此操作會導致比較緩慢,確定要執行嗎?';
if(!window.confirm(msg))
return;
}
else if(perPage==0 || perPage%1!=0)
{
alert("請輸入有效數字!");
return;
}
//存入cookie
var exp = new Date();
exp.setTime(exp.getTime() + 24*60*60*1000);
document.cookie = cookieName+"="+ perPage + ";expires=" + exp.toGMTString()+";path=/";
currentPage = 1; //設定每頁顯示數量
totalPage = Math.ceil(totalRecord/perPage);
getStartEnd();
getRemoteData();
refresh();
}
}
);
/*********************************init私有函數***************************************************/
/**
* 置為正在檢索狀態
*/
function startLoad(){
jQuery(t+" .pgRefresh").addClass("pgLoad");
jQuery(t+" .pgSearchInfo").html("讀取數據中，請稍后...");
}
/**
* 置為結束檢索狀態
*/
function overLoad(){
jQuery(t+" .pgRefresh").removeClass("pgLoad");
jQuery(t+" .pgSearchInfo").html('共 ' + totalRecord + ' 條記錄，顯示第 <span class="pgStartRecord">' + startRecord + '</span> 條 - 第 <span class="pgEndRecord">' + endRecord + '</span> 條記錄');
}
/**
* 獲得遠程數據
*/
function getRemoteData(){
jQuery.ajax(
{
type: "POST",
url: ajaxUrl + "?startrecord="+startRecord+"&endrecord="+endRecord ,
data: ajaxParam,
cache: false,
timeout: 30000,
beforeSend: function(){
startLoad();
},
success: function(data,msg){
//eval(msg);
dataContainer.html(data);
//alert(dataContainer.html());
refresh();
overLoad();
if(typeof callback=="function")
(callback)();
},
error: function(){
alert("請求失敗或超時，請稍后再試！");
overLoad();
return;
}
}
);
}
/**
* 獲得當前頁開始結束記錄
*/
function getStartEnd(){
startRecord = (currentPage-1)*perPage+1;
endRecord = Math.min(currentPage*perPage,totalRecord);
}
/**
* 刷新工具欄狀態
*/
function refresh(){
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(){
jQuery(this).addClass("pgPress");
}
/**
* 移除按鈕按下狀態樣式
*/
function unpressHandler(){
jQuery(this).removeClass("pgPress");
}
}?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -