快捷導(dǎo)航

一款Jquery 分頁(yè)插件的改造方法（服務(wù)器端分頁(yè)）

更新時(shí)間：2011年07月11日 21:10:59 作者：

分頁(yè)幾乎是每個(gè)外部程序必不可少的東西，在webform時(shí)代很多人都用過(guò)AspNetPager這個(gè)用戶(hù)控件吧，用的人之多其實(shí)就在于它的優(yōu)點(diǎn)

分頁(yè)幾乎是每個(gè)外部程序必不可少的東西，在webform時(shí)代很多人都用過(guò)AspNetPager這個(gè)用戶(hù)控件吧，用的人之多其實(shí)就在于它的優(yōu)點(diǎn)：傳給它幾個(gè)參數(shù)就可以生成像樣的分頁(yè)，其實(shí)這個(gè)也是絕大多數(shù)程序員(包括我)的致命缺點(diǎn)：樣式..,我對(duì)于咱們來(lái)說(shuō)用嘗試用CSS把一個(gè)模塊調(diào)美觀好看所花的時(shí)間遠(yuǎn)遠(yuǎn)超過(guò)了實(shí)現(xiàn)功能所需的時(shí)間- -！
現(xiàn)在越來(lái)越多做web的開(kāi)始采用.NET MVC框架，拋開(kāi)一切服務(wù)器控件，回歸正宗的B/S編程，享受靈活控制好處之余，也得花費(fèi)很多功夫，很多地方都得自己去實(shí)現(xiàn)，例如分頁(yè)這樣的東西。簡(jiǎn)單實(shí)現(xiàn)功能肯定很簡(jiǎn)單，但是要做到好用，通用，性能好，易于修改也不是一個(gè)很簡(jiǎn)單的事情，所以各種JS分頁(yè)控件大顯身手，如jquery pager、jquery Pagination等等，調(diào)用很方便，生成效果也很好，唯一缺點(diǎn)就是都是內(nèi)存分頁(yè)，數(shù)據(jù)量少點(diǎn)還好，如果成千上萬(wàn)幾百上千萬(wàn)數(shù)據(jù)可就要命了。要是能有一個(gè)調(diào)用方便還能配合進(jìn)行服務(wù)端分頁(yè)的前端控件該多好呢：）
說(shuō)了這么多接下來(lái)就給大家看看我利用一個(gè)富客戶(hù)端UI框架（DWZ）中分離改造出來(lái)的一個(gè)JS分頁(yè)控件，先看看效果圖：

頁(yè)面代碼：

復(fù)制代碼代碼如下:

 
<div class="panelBar"> 
<div class="pages"> 
<span>顯示</span> 
@Html.DropDownList("numPerPage", ViewBag.dNumPerPage as SelectList, new { onchange = "PageBreak({numPerPage:this.value})" }) 
<span>條，共 @Model.TotalCount 條</span> 
</div> 
<div class="pagination" totalcount="@Model.TotalCount" numperpage="@Model.NumPerPage" 
pagenumshown="@Model.PageNumShown" currentpage="@Model.CurrentPage"> 
</div> 

其實(shí)這個(gè)完全可以寫(xiě)成HtmlHelper調(diào)用，例如 Html.Pagination(ViewBag.dNumPerPage,Model.TotalCount,Model.NumPerPage,Model.PageNumShown,Model.CurrentPage)
這樣，一條語(yǔ)句就可以。
原理就是用js通過(guò)獲取 class="pagination" 的div的自定義屬性：總頁(yè)數(shù)TotalCount，每頁(yè)多少條NumPerPage ，顯示多少頁(yè)碼 PageNumShown，當(dāng)前頁(yè)數(shù)CurrentPage，
然后將這四個(gè)屬性傳給分頁(yè)js，分頁(yè)js內(nèi)利用這幾個(gè)關(guān)鍵屬性進(jìn)行計(jì)算，然后將預(yù)制好的分頁(yè)模板進(jìn)行替換，展現(xiàn)出分頁(yè)效果。
為了好讓美工根據(jù)項(xiàng)目整體風(fēng)格來(lái)對(duì)分頁(yè)進(jìn)行調(diào)整，實(shí)現(xiàn)好的分工合作的原則，這里分頁(yè)的js和CSS和分頁(yè)替換模板是完全分開(kāi)的，不至于程序看CSS暈，美工看JS暈。
分頁(yè)js分為兩部分，一部分只負(fù)責(zé)根據(jù)參數(shù)計(jì)算分頁(yè)（pagination.js），一部分是作之前的準(zhǔn)備工作的（core.js），一些參數(shù)的預(yù)制，在這里其實(shí)只有一個(gè)就是分頁(yè)模板的位置參數(shù)，還有一些分頁(yè)內(nèi)部用到的自定義擴(kuò)展函數(shù)，分頁(yè)模板為了美工便于修改觀察，不混在js里面，而又便于js利用，這里用XML的格式（pagination.xml），先把代碼貼出來(lái)
core.js：

復(fù)制代碼代碼如下:

 
(function($){ 
$.extend(String.prototype, { 
isPositiveInteger:function(){ 
return (new RegExp(/^[1-9]\d*$/).test(this)); 
}, 
replaceAll:function(os, ns) { 
return this.replace(new RegExp(os,"gm"),ns); 
} 
}); 
$.fn.extend({ 
hoverClass: function(className){ 
var _className = className || "hover"; 
return this.each(function(){ 
$(this).hover(function(){ 
$(this).addClass(_className); 
},function(){ 
$(this).removeClass(_className); 
}); 
}); 
} 
}); 
})(jQuery); 
var DWZ = { 
frag: {}, 
init: function (pageFrag) { 
$.ajax({ 
type: 'GET', 
url: pageFrag, 
dataType: 'xml', 
timeout: 50000, 
cache: false, 
error: function (xhr) { 
alert('Error loading XML document: ' + pageFrag + "\nHttp status: " + xhr.status + " " + xhr.statusText); 
}, 
success: function (xml) { 
DWZ.frag["pagination"]= $(xml).find("#pagination").text(); 
} 
}); 
} 
}; 

pagination.js：

復(fù)制代碼代碼如下:

 
(function($){ 
$.fn.pagination = function(opts){ 
var setting = { 
first$:"li.j-first", prev$:"li.j-prev", next$:"li.j-next", last$:"li.j-last", nums$:"li.j-num>a", jumpto$:"li.jumpto", 
pageNumFrag:'<li class="#liClass#"><a href="#">#pageNum#</a></li>' 
}; 
return this.each(function(){ 
var $this = $(this); 
var pc = new Pagination(opts); 
var interval = pc.getInterval(); 
var pageNumFrag = ''; 
for (var i=interval.start; i<interval.end;i++){ 
pageNumFrag += setting.pageNumFrag.replaceAll("#pageNum#", i).replaceAll("#liClass#", i==pc.getCurrentPage() ? 'selected j-num' : 'j-num'); 
} 
$this.html(DWZ.frag["pagination"].replaceAll("#pageNumFrag#", pageNumFrag).replaceAll("#currentPage#", pc.getCurrentPage())).find("li").hoverClass(); 
var $first = $this.find(setting.first$); 
var $prev = $this.find(setting.prev$); 
var $next = $this.find(setting.next$); 
var $last = $this.find(setting.last$); 
if (pc.hasPrev()){ 
$first.add($prev).find(">span").hide(); 
_bindEvent($prev, pc.getCurrentPage()-1, pc.targetType()); 
_bindEvent($first, 1, pc.targetType()); 
} else { 
$first.add($prev).addClass("disabled").find(">a").hide(); 
} 
if (pc.hasNext()) { 
$next.add($last).find(">span").hide(); 
_bindEvent($next, pc.getCurrentPage()+1, pc.targetType()); 
_bindEvent($last, pc.numPages(), pc.targetType()); 
} else { 
$next.add($last).addClass("disabled").find(">a").hide(); 
} 
$this.find(setting.nums$).each(function(i){ 
_bindEvent($(this), i+interval.start, pc.targetType()); 
}); 
$this.find(setting.jumpto$).each(function(){ 
var $this = $(this); 
var $inputBox = $this.find(":text"); 
var $button = $this.find(":button"); 
$button.click(function(event){ 
var pageNum = $inputBox.val(); 
if (pageNum && pageNum.isPositiveInteger()) { 
PageBreak({ pageNum: pageNum }); 
} 
}); 
$inputBox.keyup(function(event){ 
if (event.keyCode == 13) $button.click(); 
}); 
}); 
}); 
function _bindEvent(jTarget, pageNum, targetType){ 
jTarget.bind("click", {pageNum:pageNum}, function(event){ 
PageBreak({ pageNum: event.data.pageNum }); 
event.preventDefault(); 
}); 
} 
} 
var Pagination = function(opts) { 
this.opts = $.extend({ 
targetType:"navTab", // navTab, dialog 
totalCount:0, 
numPerPage:10, 
pageNumShown:10, 
currentPage:1, 
callback:function(){return false;} 
}, opts); 
} 
$.extend(Pagination.prototype, { 
targetType:function(){return this.opts.targetType}, 
numPages:function() { 
return Math.ceil(this.opts.totalCount/this.opts.numPerPage); 
}, 
getInterval:function(){ 
var ne_half = Math.ceil(this.opts.pageNumShown/2); 
var np = this.numPages(); 
var upper_limit = np - this.opts.pageNumShown; 
var start = this.getCurrentPage() > ne_half ? Math.max( Math.min(this.getCurrentPage() - ne_half, upper_limit), 0 ) : 0; 
var end = this.getCurrentPage() > ne_half ? Math.min(this.getCurrentPage()+ne_half, np) : Math.min(this.opts.pageNumShown, np); 
return {start:start+1, end:end+1}; 
}, 
getCurrentPage:function(){ 
var currentPage = parseInt(this.opts.currentPage); 
if (isNaN(currentPage)) return 1; 
return currentPage; 
}, 
hasPrev:function(){ 
return this.getCurrentPage() > 1; 
}, 
hasNext:function(){ 
return this.getCurrentPage() < this.numPages(); 
} 
}); 
})(jQuery); 

分頁(yè)模板pagination.xml：

復(fù)制代碼代碼如下:

 
<?xml version="1.0" encoding="utf-8"?> 
<_AJAX_> 
<!-- pagination --> 
<_PAGE_ id="pagination"><![CDATA[ 
<ul> 
<li class="j-first"> 
<a class="first" href="#"><span>首頁(yè)</span></a> 
<span class="first"><span>首頁(yè)</span></span> 
</li> 
<li class="j-prev"> 
<a class="previous" href="#"><span>上一頁(yè)</span></a> 
<span class="previous"><span>上一頁(yè)</span></span> 
</li> 
#pageNumFrag# 
<li class="j-next"> 
<a class="next" href="#"><span>下一頁(yè)</span></a> 
<span class="next"><span>下一頁(yè)</span></span> 
</li> 
<li class="j-last"> 
<a class="last" href="#"><span>末頁(yè)</span></a> 
<span class="last"><span>末頁(yè)</span></span> 
</li> 
<li class="jumpto"><input class="jumptotext" type="text" value="#currentPage#" /><input class="goto" type="button" value="確定" /></li> 
</ul> 
]]></_PAGE_> 
</_AJAX_> 

pagination.css：

復(fù)制代碼代碼如下:

 
@charset "utf-8"; 
/* CSS Document */ 
/* public */ 
ul li,ol li,dt,dd {list-style:none;} 
a:link{ 
color:#000000; 
text-decoration:none; 
} 
a:visited{ 
color:#000000; 
text-decoration:none; 
} 
a:hover{ 
color:#000000; 
text-decoration:underline; 
} 
/* pagination */ 
.panelBar{ 
margin-top:12px; 
height:26px; 
line-height:26px; 
} 
.panelBar ul{ 
float:left; 
} 
.panelBar ul li{ 
float:left; 
} 
.disabled{ 
padding:0 6px; 
} 
.j-num{ 
padding:0 4px; 
} 
.pages 
{ 
margin-top:12px; 
float:left; 
} 
.pagination 
{ 
float:left; 
padding-left:50px; 
} 
.pagination li, .pagination li.hover { padding:0 0 0 5px;} 
.pagination a, .pagination li.hover a, .pagination li span { float:left; display:block; padding:0 5px 0 0; text-decoration:none; line-height:23px; background-position:100% -150px;} 
.pagination li.selected a{color:red; font-weight:bold;} 
.pagination span, .pagination li.hover span { float:left; display:block; height:23px; line-height:23px; cursor:pointer;} 
.pagination li .first span, .panelBar li .previous span { padding:0 0 0 10px;} 
.pagination li .next span, .panelBar li .last span { padding:0 10px 0 0;} 
.pagination li .first span { background:url(images/pagination/pagination_first_a.gif) left 5px no-repeat;} 
.pagination li .previous span { background:url(images/pagination/pagination_previous_a.gif) left 5px no-repeat;} 
.pagination li .next span { background:url(images/pagination/pagination_next_a.gif) right 5px no-repeat;} 
.pagination li .last span { background:url(images/pagination/pagination_last_a.gif) right 5px no-repeat;} 
.pagination li .last { margin-right:5px;} 
.pagination li.disabled { background:none;} 
.pagination li.disabled span, .grid .pagination li.disabled a { background-position:0 100px; cursor:default;} 
.pagination li.disabled span span { color:#666;} 
.pagination li.disabled .first span { background:url(images/pagination/pagination_first_span.gif) left 5px no-repeat;} 
.pagination li.disabled .previous span { background:url(images/pagination/pagination_previous_span.gif) left 5px no-repeat;} 
.pagination li.disabled .next span { background:url(images/pagination/pagination_next_span.gif) right 5px no-repeat;} 
.pagination li.disabled .last span { background:url(images/pagination/pagination_last_span.gif) right 5px no-repeat;} 
.pagination li.disabled .last { margin-right:5px;} 
.pagination li.jumpto { padding:2px 2px 0 7px; background-position:0 -200px;} 
.pagination li.jumpto .jumptotext { float:left; width:30px; height:15px; padding:1px; border-color:#acaeaf; background:#ffffff; border:1px solid #9999cc;} 
.pagination li.jumpto .goto { float:left; display:block; overflow:hidden; width:16px; height:19px; border:0; text-indent:-1000px; background:url(images/pagination/pagination_goto.gif) no-repeat; cursor:pointer;} 

我看CSS也頭疼，這個(gè)是我找一個(gè)朋友寫(xiě)的，自己又改了改
接下來(lái)講講使用方法：
首先指定自己分頁(yè)模板的路徑 DWZ.init("js/pagination.xml"); 然后調(diào)用分頁(yè)：

復(fù)制代碼代碼如下:

 
$(function(){ 
$("div.pagination").each(function () { 
var $this = $(this); 
$this.pagination({ 
totalCount: $this.attr("totalCount"), 
numPerPage: $this.attr("numPerPage"), 
pageNumShown: $this.attr("pageNumShown"), 
currentPage: $this.attr("currentPage") 
}); 
}); 
}); 

這里為什么用each呢，為啥不直接$("div.pagination").pagination（{}）呢，大家應(yīng)該想到了，有挺多時(shí)候用戶(hù)喜歡在列表的上下都放分頁(yè)便于操作，這兩塊js其實(shí)可以單獨(dú)放一個(gè)文件，需要用到分頁(yè)的文件引用即可，因?yàn)槌绦蛘嬲玫降氖莣eb和服務(wù)器端交換所關(guān)心的數(shù)據(jù)，totalCount numPerPage pageNumShown currentPage ，之前所做的所有都只是實(shí)現(xiàn)好用通用的框架?，F(xiàn)在無(wú)需改動(dòng)的東西都做好了，怎么實(shí)現(xiàn)交互呢，很簡(jiǎn)單：點(diǎn)擊頁(yè)碼或者選擇每頁(yè)顯示下拉框或者點(diǎn)擊go按鈕時(shí)候都會(huì)觸發(fā)一個(gè)自定義函數(shù) PageBreak ，這個(gè)函數(shù)內(nèi)部就大家想實(shí)現(xiàn)什么具體去寫(xiě)，例如

復(fù)制代碼代碼如下:

 
function PageBreak(args) { 
alert(args["pageNum"]||args["numPerPage"]); 
} 

在這里面可以用js取得當(dāng)前的totalCount numPerPage pageNumShown curren，和頁(yè)面上篩選的form的值一并ajax提交給后端頁(yè)面，然后接收返回的數(shù)據(jù)，加載到指定位置，并且注意給<div class="pagination" >這個(gè)DIV的自定義屬性重新賦值然后調(diào)用一下pagination方法即可，不知道寫(xiě)清楚沒(méi)有，先去吃飯了，如果有問(wèn)題可以留言，如果不清楚具體使用的人多，打算后續(xù)寫(xiě)兩種用法，一種是返回?cái)?shù)據(jù)直接返回這個(gè)div的，一個(gè)是只返回表單中行數(shù)據(jù)和div的4個(gè)自定義屬性，然后js動(dòng)態(tài)賦值的

您可能感興趣的文章: