jquery分頁對(duì)象使用示例
更新時(shí)間：2014年04月01日 14:31:14 作者：
這篇文章主要介紹了jquery分頁對(duì)象使用示例,需要的朋友可以參考下
使用方法和相關(guān)參數(shù)如下：
displayId//默認(rèn)值顯示區(qū)域Id為pageBox，可以不填
pagesize//每頁條數(shù)，默認(rèn)是15條，可以不填
totalsize//總條數(shù)
curpage//當(dāng)前頁數(shù)
simple//默認(rèn)是false，true沒有上一頁和下一頁，
type//0默認(rèn)走h(yuǎn)ttp跳轉(zhuǎn)，1是jsp頁面必須有pageCallBack(pageNum)函數(shù),從1開始
url//鏈接地址，如果type出入1此處就可以不填
例子：Page._run({totalsize:300,curpage:11,type:1,simple:true}
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page對(duì)象</title>
<style>
.pageBox,.pageBox1{ text-align:center; height:25px; padding:15px 0;}
.pageBox .pages a.up,.pageBox .pages a.down{ color:#6eb4ea; text-decoration:none; border:1px solid #ffffff; background:none;}
.pageBox .pages a.else{ background:none; border:none;}
.pageBox .pages a{ padding:3px 7px; border:1px solid #f3f6f6; background:#fdfdfd; margin:0 5px; color:#999999;}
.pageBox .pages a:hover,.pageBox .pages a.hover{ background:#6eb4ea; border:1px solid #6eb4ea; color:#ffffff; text-decoration:none;padding:2px 7px; }
pageBox .pages span{ padding:3px 7px; color:#999999;}
.fiv_sep{ height:3px; float:left; width:100%; font-size:4px; line-height:2px;}
</style>
<script type="text/javascript" src="../jquery/jquery.js"></script><!--jquery支持1.4以上版本-->
</head>
<body>
<h1>Page</h1>
<div class="pageBox" id="pageBox"></div>
<script type="text/javascript">
var Page = {
/**
displayId//默認(rèn)值顯示區(qū)域Id為pageBox，可以不填
pagesize//每頁條數(shù)，默認(rèn)是15條，可以不填
totalsize//總條數(shù)
curpage//當(dāng)前頁數(shù)
simple//默認(rèn)是false，true沒有上一頁和下一頁，
type//0默認(rèn)走h(yuǎn)ttp跳轉(zhuǎn)，1是jsp頁面必須有pageCallBack(pageNum)函數(shù),從1開始
url//鏈接地址，如果type出入1此處就可以不填
例子：Page._run({totalsize:300,curpage:11,type:1,simple:true}
*/
_run:function(param){
var totalpages = 1,//總頁數(shù)
displayId="#pageBox",//顯示區(qū)域Id
pagesize=15,//每頁條數(shù)
totalsize=0,//總條數(shù)
curpage=1,//當(dāng)前頁數(shù)
url="",//鏈接地址
type=0,//0默認(rèn)走h(yuǎn)ttp跳轉(zhuǎn)，1傳入回調(diào)函數(shù)
simple=false;//簡單版本，沒有上一頁和下一頁
if(param.type!=undefined)type=param.type;
if(param.displayId!=undefined)displayId=param.displayId;
if(param.pagesize!=undefined)pagesize=param.pagesize;
if(param.totalsize!=undefined)totalsize=param.totalsize;
if(param.curpage!=undefined)curpage=param.curpage;
if(param.url!=undefined)url=param.url;
if(param.simple!=undefined)simple=param.simple;
if(url.indexOf("?")==-1){
url += "?1=1";
}
if(totalsize>0){
totalpages = Page._getTotalPages(totalsize,pagesize);
if(curpage>totalpages){curpage=totalpages;}//傳入頁數(shù)大于總頁數(shù)，就按最后一頁算
if(totalpages>1){
var firstPage= simple?"":Page._builderPageArea(type,"up",url,curpage-1,"上一頁",false,displayId),
lastPage = simple?"":Page._builderPageArea(type,"down",url,parseInt(curpage)+1,"下一頁",false,displayId),pages = new Array();
if(curpage<=4){//第一頁 無上一頁
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//總頁數(shù)超過5
for(var i=1;i<=5;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
pages.push('<span>...</span>');
pages.push(Page._builderPageArea(type,"",url,totalpages,totalpages,false,displayId));
}else{//總頁數(shù)<=5的，列1,2，3,4，5
for(var i=1;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
}
if(curpage!=totalpages)pages.push(lastPage);
}else if(totalpages-curpage<=4){//最后一頁 無下一頁
if(curpage!=1){pages.push(firstPage);}
if(totalpages>5){//總頁數(shù)超過5
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push('<span>...</span>');
for(var i=totalpages-4;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
if(totalpages!=curpage) {pages.push(lastPage);}
}else{//總頁數(shù)<=5的，列1,2，3,4，5
for(var i=1;i<=totalpages;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
if(curpage!=totalpages)pages.push(lastPage);
}
}else{//有上一頁和最后一頁 且總頁數(shù)肯定大于5
pages.push(firstPage);
pages.push(Page._builderPageArea(type,"",url,1,1,false,displayId));
pages.push('<span>...</span>');
for(var i=curpage-2;i<=curpage+2;i++){
if(curpage==i){
pages.push(Page._builderPageArea(type,"",url,i,i,true,displayId));
}else{
pages.push(Page._builderPageArea(type,"",url,i,i,false,displayId));
}
}
pages.push('<span>...</span>');
pages.push(Page._builderPageArea(type,"",url,totalpages,totalpages,false,displayId));
pages.push(lastPage);
}
var result = new Array();
result.push('<div class="pages">');
result.push(pages.join(''));
result.push('</div>');
$(displayId).html(result.join(''));
}
}else{
}
},
/**計(jì)算總頁數(shù)*/
_getTotalPages:function(_totalsize,_pagesize){
if(_totalsize%_pagesize==0)
return _totalsize/_pagesize;
else
return parseInt(_totalsize/_pagesize)+1;
},
/**構(gòu)造分頁的每個(gè)頁數(shù)區(qū)域*/
_builderPageArea:function(type,textType,url,page,text,_focus,_displayId){
var hrefStr,href= new Array();
if(type==0){
href.push(url);
href.push('&pagenum=');
href.push(page);
}else if(type==1){
href.push('javascript:void(0);pageCallBack(\\'');
href.push(page);
href.push('\\',\\'');
href.push(_displayId);
href.push('\\')');
}
hrefStr = href.join(''),result=new Array();
if(textType=='up'){
result.push('<a href="');
result.push(hrefStr);
result.push('" class="up">上一頁</a>');
}else if(textType=='down'){
result.push('<a href="');
result.push(hrefStr);
result.push('" class="down">下一頁</a>');
}else{
result.push('<a href="');
result.push(hrefStr);
if(_focus){
result.push('" style="background:#6EB4EA;color:#FFF;">');
}else{
result.push('">');
}
result.push(page);
result.push('</a>');
}
return result.join('');
}
};
Page._run({totalsize:100,curpage:1,pagesize:10});
</script>
</body>
</html>
您可能感興趣的文章:
- jquery分頁插件jpaginate在IE中不兼容問題
- jQuery客戶端分頁實(shí)例代碼
- 使用PHP+JQuery+Ajax分頁的實(shí)現(xiàn)
- jQuery Pagination Ajax分頁插件(分頁切換時(shí)無刷新與延遲)中文翻譯版
- jquery.pagination.js 無刷新分頁實(shí)現(xiàn)步驟分享
- jquery.pagination +JSON 動(dòng)態(tài)無刷新分頁實(shí)現(xiàn)代碼
- 基于jquery封裝的一個(gè)js分頁
- jQuery中jqGrid分頁實(shí)現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - Pagination分頁
- 用jQuery中的ajax分頁實(shí)現(xiàn)代碼
- 一款Jquery 分頁插件的改造方法（服務(wù)器端分頁）
- 基于Jquery實(shí)現(xiàn)表格動(dòng)態(tài)分頁實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的表格分頁實(shí)現(xiàn)代碼
- 基于jQuery的實(shí)現(xiàn)簡單的分頁控件
- 基于JQuery的Pager分頁器實(shí)現(xiàn)代碼
- 基于jQuery的js分頁代碼
- jquery+ashx無刷新GridView數(shù)據(jù)顯示插件(實(shí)現(xiàn)分頁、排序、過濾功能)
- jquery+json實(shí)現(xiàn)的搜索加分頁效果
- php jquery 實(shí)現(xiàn)新聞標(biāo)簽分類與無刷新分頁
- jquery pagination插件實(shí)現(xiàn)無刷新分頁代碼
- JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn)
- jQuery插件分享之分頁插件jqPagination
相關(guān)文章
有朋友問GridView控件對(duì)于跨行合并的問題，這可以用控件嵌套來完成，當(dāng)然，我更喜歡在前臺(tái)來用JS來控制網(wǎng)頁元素的樣式，而后臺(tái)僅僅是根據(jù)客戶的請(qǐng)求，來返回?cái)?shù)據(jù)。2011-09-09
詳解jQuery UI庫中文本輸入自動(dòng)補(bǔ)全功能的用法
這篇文章主要介紹了詳解jQuery UI庫中文本輸入自動(dòng)補(bǔ)全功能的用法,其中重點(diǎn)講解了常用的郵箱地址輸入時(shí)后綴自動(dòng)補(bǔ)全功能的使用,需要的朋友可以參考下2016-04-04
在jQuery庫中，幾乎所有的插件都被限制在它的命名空間里。全局的對(duì)象都很好地存儲(chǔ)在jQuery命名空間里，因此當(dāng)把jQuery和其它javascript類庫一起使用時(shí)，不會(huì)引起沖突.2010-06-06
Jquery EasyUI Datagrid右鍵菜單實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Jquery EasyUI Datagrid右鍵菜單的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Jquery+bootstrap實(shí)現(xiàn)表格行置頂置底上移下移操作詳解
這篇文章主要為大家詳細(xì)介紹了Jquery+bootstrap實(shí)現(xiàn)表格行置頂置底上移下移操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery操作Select選擇的Text和Value(獲取/設(shè)置/添加/刪除)
本文將詳細(xì)介紹下jQuery獲取/設(shè)置/添加/刪除Select選擇的Text和Value,感興趣的你可以參考下本文或許對(duì)你有所幫助2013-03-03
jqGrid表格應(yīng)用之新增與刪除數(shù)據(jù)附源碼下載
jqGrid可以結(jié)合fancybox等插件完成超酷的彈出層效果，通過與php后臺(tái)交互，可以輕松完成數(shù)據(jù)的添加與詳情查看，而這個(gè)過程完全是一個(gè)ajax異步通信過程，是一個(gè)非常友好的富客戶端應(yīng)用，本文給大家介紹jqGrid表格應(yīng)用之新增與刪除數(shù)據(jù)，需要的朋友參考下2015-12-12
jQuery ui插件的使用方法代碼實(shí)例，需要的朋友可以參考一下2013-05-05
jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
這篇文章主要介紹了jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起的功能,實(shí)例分析了jQuery中slideUp方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
7款吸引人眼球的jQuery/CSS3特效實(shí)例分享
jQuery和CSS3對(duì)于web前端開發(fā)肯定用得也比較多，接下來分享一些由jQuery和CSS3制作成的特效，希望對(duì)哪些喜歡學(xué)習(xí)特效的朋友有所幫助2013-04-04