基于jQuery的實(shí)現(xiàn)簡單的分頁控件

更新時(shí)間：2010年10月10日 00:55:34 作者：

分頁控件需要向后臺(tái)發(fā)送請(qǐng)求，發(fā)送的參數(shù)包括當(dāng)前頁，每頁顯示數(shù)量，查詢條件；并且獲取數(shù)據(jù)加載到當(dāng)前頁面

1：效果圖

2：素材

3：編碼
3.1思考
需要做什么？
1：分頁控件需要向后臺(tái)發(fā)送請(qǐng)求，發(fā)送的參數(shù)包括當(dāng)前頁，每頁顯示數(shù)量，查詢條件；并且獲取數(shù)據(jù)加載到當(dāng)前頁面；
2：進(jìn)行修改刪除操作的時(shí)候能記住當(dāng)前頁；
3：查詢后翻頁的時(shí)候可以可以記住當(dāng)前查詢的條件

3.2實(shí)現(xiàn)
HTML

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

 
<!--存儲(chǔ)數(shù)據(jù)的容器--> 
<div class="tableData"> 
</div> 
<!--分頁控件顯示--> 
<div class="pageBar"></div> 

jQuery
為了我們的控件可以隨意使用，我們將其寫成插件的形式，首先搭個(gè)框架，我們將插件命名為simplePage

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

 
(function($){ 
$.fn.simplePage=function(o){ 
var options={ 
//配置參數(shù) 
}; 
return //sth 
} 
})(jQuery) 

默認(rèn)有哪些參數(shù)呢？
由于需要發(fā)送當(dāng)前頁，每頁顯示數(shù)量，所以需要 currentPage，pageSize 兩個(gè)基本參數(shù)；
由于需要查詢表格內(nèi)容，所以需要一個(gè)放置查詢條件的表單 form；
由于需要修改刪除后記住當(dāng)前頁，所以需要一個(gè)標(biāo)志指示當(dāng)前進(jìn)行的是何操作type；
為了使我們的程序更具有靈活性，加上獲取數(shù)據(jù)后需要加載到的container，還有就是分頁控件加載的pager，
具體如下

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

 
var options={ 
pager: '.pager',//表格控件的容器 
container: '.tableData',//放置表格數(shù)據(jù)的容器 
form: '#form',//放置查詢條件的表單 
pageForm: '#pageForm',//放置隱藏與的Div 
url: '',//發(fā)送請(qǐng)求的地址 
currentPage: 1, 
pageSize: 2 
type: null,//可選：action, 
pageShow:7 
} 

為了便于維護(hù)，我們聲明一個(gè)獨(dú)立的對(duì)象來進(jìn)行獲取數(shù)據(jù)，綁定事件的操作，我們將這個(gè)函數(shù)命名為$.page

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

 
$.page = { 
// 
setPage: function(o){ 
}, 
//獲取當(dāng)前頁 
getCurrentPage: function(o){ 
}, 
//獲取每頁顯示數(shù)量 
getPageSize: function(o){ 
}, 
//生成發(fā)送所需要的json數(shù)據(jù) 
genData: function(o){ 
}, 
//發(fā)送數(shù)據(jù) 
loadData: function(o){ 
} 
} 

實(shí)現(xiàn)以上所聲明的函數(shù)，當(dāng)分頁第一次加載的時(shí)候，我們需要從服務(wù)器獲取總頁數(shù)來生成分頁控件，所以首先實(shí)現(xiàn)loadData函數(shù)

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

 
loadData: function(o){ 
var that = this; 
var data = that.genData(o); 
$.ajax({ 
url: o.url, 
data: data, 
type: 'post', 
dataType: 'html', 
cache: false, 
success: function(result){ 
var res = $(result).find('tbody').html(); 
var totalPage = $(result).find('#totalPage').val(); 
var currentPage = $(result).find('#currentPage').val(); 
o.currentPage=currentPage; 
o.pager.empty(); 
$.line.setLine(totalPage,o); //調(diào)用生成分頁控件的函數(shù) 
}, 
error: function(){ 
alert("error"); 
} 
}) 
} 

下面我們實(shí)現(xiàn)上面生成分頁控件的函數(shù)$.line.setLine

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

 
$.line={ 
setLine:function(totalPage,o){ 
for(var i=0;i<totalPage;i++){ 
var a=$('<a/>').html('<span>'+(i+1)+'</span>').addClass('pageA').bind('click',function(){ 
var s=$(this); 
s.siblings().removeClass('pageActive'); 
s.addClass('pageActive'); 
o.currentPage=s.text(); 
$.page.loadData(o); 
}); 
if(o.currentPage==i+1){ 
a.addClass('pageActive'); 
} 
o.pager.append(a); 
} 
var limit=this.getLimit(o,totalPage); 
var aPage=o.pager.find('a.pageA').not('a.previous,a.nextAll,a.record'); 
aPage.hide(); 
aPage.slice(limit.start,limit.end).show(); 
var prev=$('<a/>').html('<span>上一頁</span>').addClass('pageA previous').unbind('click').bind('click',function(){ 
var pageActive=o.pager.find('a.pageActive'); 
var s=$(this); 
if(pageActive.prev().text()=='上一頁'){ 
alert('已經(jīng)是第一頁!'); 
return false; 
} 
pageActive.removeClass('pageActive'); 
pageActive.prev().addClass('pageActive'); 
o.currentPage=pageActive.prev().text(); 
$.page.loadData(o); 
}); 
var next=$('<a/>').html('<span>下一頁</span>').addClass('pageA nextAll').unbind('click').bind('click',function(){ 
var pageActive=o.pager.find('a.pageActive'); 
var s=$(this); 
if(pageActive.next().text()=='下一頁'){ 
alert('已經(jīng)是最后一頁!'); 
return false; 
} 
pageActive.removeClass('pageActive'); 
pageActive.next().addClass('pageActive'); 
o.currentPage=pageActive.next().text(); 
$.page.loadData(o); 
}); 
var pageActiveText=o.pager.find('a.pageActive').text(); 
var record=$('<a/>').html('<span>'+pageActiveText+'/'+totalPage+'</span>').addClass('pageA record'); 
o.pager.prepend(prev).prepend(record).append(next); 
} 
} 

在上面的代碼中我們給當(dāng)前的頁面加上了pageActive類，所以現(xiàn)在我們可以實(shí)現(xiàn)$.page的getCurrentPage函數(shù)，非常簡單

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

 
getcurrentPage: function(o){ 
var p = o.pager.find("a.pageActive").text(); 
return p; 
} 

接著我們實(shí)現(xiàn)生成json數(shù)據(jù)的genData函數(shù)，json格式為{key:value,key:value}

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

 
genData: function(o){ 
var sdata = $.extend({}, { "currentPage": o.currentPage, 
"pageSize": o.pageSize}, $.jsonObj(o.pageForm)); 
return sdata; 
}, 

上面的$.jsonObj為自定義的函數(shù)，為了生成我們需要的json格式以便發(fā)送查詢的數(shù)據(jù)，只支持input，select

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

 
$.jsonObj = function(form){ 
//判斷是否有序列化的東東 
if (!$(form).html() || $(form).html() == null || $.trim($(form).html()) == "") { 
return null; 
} 
var formEl = $(form).find('input[type="text"]'); 
var formselect = $(form).find('select'); 
var json = "{"; 
for (var i = 0; i < formEl.length - 1; i++) { 
var name = formEl.eq(i).attr('name'); 
var val = "'" + formEl.eq(i).val() + "'"; 
json += name; 
json += ":"; 
json += val; 
json += ","; 
} 
var lname = formEl.eq(formEl.length - 1).attr('name'); 
var lval = "'" + formEl.eq(formEl.length - 1).val() + "'"; 
json += lname; 
json += ":"; 
json += lval; 
if (formselect) { 
json += ","; 
for (var i = 0; i < formselect.length - 1; i++) { 
var name = formselect.eq(i).attr('name'); 
var val = "'" + formselect.eq(i).val() + "'"; 
json += name; 
json += ":"; 
json += val; 
json += ","; 
} 
var lname = formselect.eq(formselect.length - 1).attr('name'); 
var lval = "'" + formselect.eq(formselect.length - 1).val() + "'"; 
json += lname; 
json += ":"; 
json += lval; 
} 
json += "}"; 
var jsonObj = eval("(" + json + ")") 
return jsonObj; 
} 

接著我們?yōu)椴樵儽韱蔚陌粹o綁定事件，我們擴(kuò)展下我們的$.page函數(shù)

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

 
handleQueryLine:function(o){ 
$(o.form).find(".query").click(function(){ 
//$(o.pageForm).append($(o.form).clone(true)); 
$(o.pageForm).empty(); 
$(o.form).find('input[type="text"]').each(function(){ 
var vals = $(this).val(); 
var s = $(this).clone().val(vals); 
$(o.pageForm).append(s); 
}); 
$(o.form).find('select').each(function(){ 
var vals = $(this).val(); 
var s = $(this).clone().val(vals); 
$(o.pageForm).append(s); 
}); 
$.page.query(o); 
}); 
} 

ok，基本的函數(shù)已經(jīng)完成，下面完成主函數(shù)

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

 
$.fn.simplePage = function(os){ 
var options = { 
pager: '.pager',//表格控件的容器 
container: '.tableData',//放置表格數(shù)據(jù)的容器 
form: '#form',//放置查詢條件的表單 
pageForm: '#pageForm',//放置隱藏與的Div 
url: '',//發(fā)送請(qǐng)求的地址 
currentPage: 1, 
pageSize: 2, 
type: null,//可選：action, 
pageShow:7//, 
}; 
var o = $.extend(options, os); 
return this.each(function(){ 
o.pager = $(this).find(o.pager); 
o.container = $(this).find(o.container); 
//首先清除click事件 
o.pager.unbind('click'); 
if (o.type == 'action') { 
//指定的動(dòng)作，比如刪除時(shí)的事件，這時(shí)需要在當(dāng)前頁刷新數(shù)據(jù) 
o.currentPage = $.page.getPageSize(o); 
o.pageSize = $.page.getCurrentPage(o); 
$.page.loadData(o); 
return; 
} 
$.page.loadData(o); 
$.line.handleQueryLine(o); 
}) 
} 

現(xiàn)在我們的分頁還不是很好看，我們用firebug查看下生成的分頁結(jié)構(gòu)，寫了如下樣式

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

 
.pager a { 
display: block; 
float: left; 
width: 16px; 
height: 16px; 
margin: 5px; 
} 
.pager a.pageA{ 
background:url("../images/grid/page.png") no-repeat left 0px transparent; 
display:inline-block; 
font-size:14px; 
margin:0 3px; 
padding-left:6px; 
text-align:center; 
vertical-align:bottom; 
height:auto; 
width:auto; 
cursor:pointer; 
} 
.pager a.pageA span{ 
background:url("../images/grid/page.png") no-repeat right 0px transparent; 
display:inline-block; 
height:24px; 
line-height:22px; 
padding-right:6px; 
} 
.pager a.pageActive{ 
background:url("../images/grid/page.png") no-repeat left -24px transparent; 
} 