基于JQUERY开发的一个JPAGE插件的修改版
前段时间用JQUERY开发，遇到有分页的问题，看到别人开发的JPAGE插件，但是感觉功能很一般，因此根据自己的实际需要，对原有的插件进行了修改，现在插件的自由度很大，通过一个函数，可以实现很多不可思议的功能
代码如下
jQuery.fn.jpage = function(config){
init("#"+this.attr("id"),config);
}
function init(t,config){
var totalRecord = 0; //总记录数cookie(t+'_currentPage'
var totalPage = 0; //总页数
//var currentpage = config.currentpage > 0 ? config.currentpage : ($.cookie(t+"_currentPage") == null ? 1 : parseInt($.cookie(t+"_currentPage"))); //当前页码
var currentpage = $.cookie(t+"_currentPage") == null ? 1 : parseInt($.cookie(t+"_currentPage"));
var perpage = config.perpage > 0 ? config.perpage : ($.cookie(t+"_perPage") > 0 ? parseInt($.cookie(t+"_perPage")) : 20);
//var perpage = config.perpage > 0 ? config.perpage : 20; //每页显示记录数
var arrperpage = config.arrperpage==null ? [5,10,15,20,25,40] : config.arrperpage;
var showMode = config.showMode == null ? 'full' : config.showMode; //显示模式
var barPosition = config.barPosition == null ? 'bottom' : config.barPosition; //工具条位置
var proxyUrl = config.proxyUrl; //数据代理地址
var ajaxParam = config.ajaxParam == null ? '' : config.ajaxParam; //ajax的请求参数
var startRecord,endRecord;
$(t+" .pgToolbar").remove();
gettoolbar();
getRemoteData();
/**
* 获得远程数据
*/
function getRemoteData(){
$(t).block({
message: '<div class="block_loading">正在检索中，请稍候...</div>',
css: {
padding: '0 0 0 40px',
margin: 0,
width: '280px',
height: '30px',
textAlign: 'center',
color: '#f00',
border: '3px solid #f19200',
backgroundColor: '#fff3d5'
},
fadeOut: 0,
overlayCSS:{
backgroundColor:"#bbb",
opacity: "0.58"
}
});
$.ajax(
{
type: "POST",
url: proxyUrl + "&page="+currentpage+"&perpage="+perpage,
cache: false,
data: ajaxParam,
dataType: "xml",
timeout: 30000,
success: function(xml){
var iErrID = $('iErrID', xml).text();
var strResult = $('strResult', xml).text();
if (iErrID==2000){
dataStore = [];
$(xml).find('rowlist').each(function(i){
var xmlelem= new Array();
$(this).children().each(function(i){xmlelem[i]=$(this).text();});
dataStore[i]=xmlelem; //二元数组
});
totalRecord = $('totalrecord', xml).text();
totalPage = $('totalpage', xml).text();
getStartEnd();
loadData();
refresh();
overLoad();
$(t).unblock();
}
else if ((iErrID==1000) || ((iErrID>=4000) && (iErrID<=4005))){
$(t).unblock();
alert('服务器处理错误，【错误编号】：'+iErrID+'\n【错误描述】：'+strResult);
}
else {
alert('数据检索过程出现发生未知错误，请重新进行查询');
$(t).unblock();
};
},
error: function(msg,msg1){
alert('数据检索错误，请重新进行查询');
$(t).unblock();
return;
}
}
);
}
/**
* 获得当前页开始结束记录
*/
function getStartEnd(){
if (currentpage>totalPage) {currentpage= totalPage;};
if (currentpage<1){currentpage=1};
startRecord = (currentpage-1)*perpage+1;
endRecord = Math.min(currentpage*perpage,totalRecord);
}
/**
* 刷新数据容器
*/
function loadData(){
config.dataupdate(dataStore);
//alert(dataStore);
}
/**
* 刷新工具栏状态
*/
function refresh(){
//当前页码写入cookie
$.cookie(t+'_currentPage', currentpage);
$.cookie(t+'_perPage', perpage);
valCurrentPage.val(currentpage);
valStartRecord.html(startRecord);
valEndRecord.html(endRecord);
valTotalPage.html(totalPage);
btn.bind("mouseup",unpressHandler);
btn.bind("mouseout",unpressHandler);
if (currentpage == totalPage && currentpage == 1){
btn.unbind("mousedown",pressHandler);
btnNext.unbind("click",btnNext_click).addClass("pgNextDisabled"); //禁止所有按钮
btnLast.unbind("click",btnLast_click).addClass("pgLastDisabled");
btnPrev.unbind("click",btnPrev_click).addClass("pgPrevDisabled");
btnFirst.unbind("click",btnFirst_click).addClass("pgFirstDisabled");
}else if(currentpage == totalPage){
btnNext.unbind("click",btnNext_click).addClass("pgNextDisabled"); //禁止下一页，最后一页
btnLast.unbind("click",btnLast_click).addClass("pgLastDisabled");
btnPrev.removeClass("pgPrevDisabled").bind("click",btnPrev_click); //开放首页、上一页
btnFirst.removeClass("pgFirstDisabled").bind("click",btnFirst_click);
btnBack.bind("mousedown",pressHandler);
btnGo.unbind("mousedown",pressHandler);
}else if(currentpage == 1){
btnNext.removeClass("pgNextDisabled").bind("click",btnNext_click); //开放下一页，最后一页
btnLast.removeClass("pgLastDisabled").bind("click",btnLast_click);
btnPrev.unbind("click",btnPrev_click).addClass("pgPrevDisabled"); //禁止首页、上一页
btnFirst.unbind("click",btnFirst_click).addClass("pgFirstDisabled");
btnBack.unbind("mousedown",pressHandler);
btnGo.bind("mousedown",pressHandler);
}else{
btnNext.removeClass("pgNextDisabled").bind("click",btnNext_click); //开放下一页，最后一页
btnLast.removeClass("pgLastDisabled").bind("click",btnLast_click);
btnPrev.removeClass("pgPrevDisabled").bind("click",btnPrev_click); //开放首页、上一页
btnFirst.removeClass("pgFirstDisabled").bind("click",btnFirst_click);
btnBack.bind("mousedown",pressHandler);
btnGo.bind("mousedown",pressHandler);
}
}
/**
* 添加按钮按下状态样式
*/
function pressHandler(){
$(this).addClass("pgPress");
}
/**
* 移除按钮按下状态样式
*/
function unpressHandler(){
$(this).removeClass("pgPress");
}
/**
* 置为结束检索状态
*/
function overLoad(){
$(t+" .pgSearchInfo").html('检索到 ' + totalRecord + ' 条记录，显示第 <span class="pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="pgEndRecord">' + endRecord + '</span> 条记录');
}
function gettoolbar(){
//添加工具条
var toolbar = '<div class="pgToolbar">';
toolbar += '<div class="pgPanel">';
if(showMode == 'full'){
toolbar += '<div><select class="pgPerPage">';
if(perpage>0)
toolbar += '<option value="'+perpage+'">'+perpage+'</option>';
for (var i=0;i<arrperpage.length;i++){
toolbar += '<option value="'+arrperpage[i]+'">'+arrperpage[i]+'</option>';
};
toolbar += '</select> </div>';
toolbar += '<div class="separator"></div>';
}
toolbar += '<div class="pgBtn pgFirst" title="首页"></div>';
toolbar += '<div class="pgBtn pgPrev" title="上页"></div>';
if(showMode != 'mini'){
toolbar += '<div class="separator"></div>';
toolbar += '<div>第 <input class="pgCurrentPage" 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>';
if(showMode == 'full'){
toolbar += '<div class="separator"></div>';
toolbar += '<div class="pgSearchInfo">检索到 ' + totalRecord + ' 条记录，显示第 <span class="pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="pgEndRecord">' + endRecord + '</span> 条记录</div>';
}
toolbar += '<hr class="cleanFloat" /></div>';
toolbar += '</div>';
switch(barPosition){
case 'top':
$(t+' table').before(toolbar);
break;
case 'bottom':
$(t+' table').after(toolbar);
break;
default:
$(t+' table').after(toolbar);
$(t+' table').before(toolbar);
};
}
var btnNext =$(t+" .pgNext"); //下一页按钮
var btnPrev = $(t+" .pgPrev"); //上一页按钮
var btnFirst = $(t+" .pgFirst"); //首页按钮
var btnLast = $(t+" .pgLast"); //末页按钮
var btnGo = $(t+" .pgNext,"+t+" .pgLast");
var btnBack = $(t+" .pgPrev,"+t+" .pgFirst");
var btn = $(t+" .pgFirst,"+t+" .pgPrev,"+t+" .pgNext,"+t+" .pgLast");
var valCurrentPage = $(t+" .pgCurrentPage");
var valStartRecord = $(t+" .pgStartRecord");
var valEndRecord =$(t+" .pgEndRecord");
var valContainer = $(t+" .pgContainer");
var valPerPage = $(t+" .pgPerPage");
var valTotalPage = $(t+" .pgTotalPage");
function btnNext_click(){
if(currentpage < totalPage){
currentpage += 1;
getStartEnd();
getRemoteData();
}
}
function btnPrev_click(){
if(currentpage > 1){
currentpage -= 1;
getStartEnd();
getRemoteData();
}
}
function btnFirst_click(){
if(currentpage > 1){
currentpage = 1;
getStartEnd();
getRemoteData();
}
}
function btnLast_click(){
if(currentpage < totalPage){
currentpage = totalPage;
getStartEnd();
getRemoteData();
}
}
valCurrentPage.keydown(function(){
var targetPage = parseInt($(this).val());
if(event.keyCode==13){
if(targetPage>=1 && targetPage<=totalPage){
currentpage = targetPage;
getStartEnd();
getRemoteData();
}
else alert('跳转页码超出范围！');
}
})
valPerPage.change(
function(){
currentpage = 1;
perpage = parseInt($(this).val());
getRemoteData();
valCurrentPage.focus();
}
)
}
调用方法
$('#pro_list_div').jpage({
dataStore: null,
perpage: null,
arrperpage: [5,10,20,30,40,50],
barPosition: 'bottom',
proxyUrl: 'Admin_API_ProductListl.asp?getdatetype=xml&action=proinfo&type=0&sch_key='+$('#sch_key').val()+'&sch_type='+$('#sch_type').val()+'&sch_pro_type='+$('#sch_pro_type').val()+'&sch_order='+$('#sch_order').val(),
onerrorload: function(){$('#btprosearch').bind('click', function(){return listpage();});},
dataupdate: function(dataStore){
$('#pro_list tbody tr').remove();
for(var i=0;i<=dataStore.length-1;i++){
addProRow('pro_list','',dataStore[i][0],dataStore[i][1],dataStore[i][2],dataStore[i][3],dataStore[i][4],dataStore[i][5],dataStore[i][6],dataStore[i][7],dataStore[i][8],dataStore[i][9],dataStore[i][10],dataStore[i][11],dataStore[i][12]);
};
$('#btprosearch').attr('disabled',false);
//$('#pro_list *').tooltip({delay: 0,showURL: false,top:5,left:25});
}
});
