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

瑤疏影 2016-03-07

展開(kāi)全文

1：效果圖

2：素材

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

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

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

<div class="tableData">
</div>

<div class="pageBar"></div>

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

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

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

默認(rèn)有哪些參數(shù)呢？
由于需要發(fā)送當(dāng)前頁(yè)，每頁(yè)顯示數(shù)量，所以需要 currentPage，pageSize 兩個(gè)基本參數(shù)；
由于需要查詢表格內(nèi)容，所以需要一個(gè)放置查詢條件的表單 form；
由于需要修改刪除后記住當(dāng)前頁(yè)，所以需要一個(gè)標(biāo)志指示當(dāng)前進(jìn)行的是何操作type；
為了使我們的程序更具有靈活性，加上獲取數(shù)據(jù)后需要加載到的container，還有就是分頁(yè)控件加載的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ì)象來(lái)進(jìn)行獲取數(shù)據(jù)，綁定事件的操作，我們將這個(gè)函數(shù)命名為$.page

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

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

實(shí)現(xiàn)以上所聲明的函數(shù)，當(dāng)分頁(yè)第一次加載的時(shí)候，我們需要從服務(wù)器獲取總頁(yè)數(shù)來(lái)生成分頁(yè)控件，所以首先實(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)用生成分頁(yè)控件的函數(shù)
},
error: function(){
alert("error");
}
})
}

下面我們實(shí)現(xiàn)上面生成分頁(yè)控件的函數(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>上一頁(yè)</span>').addClass('pageA previous').unbind('click').bind('click',function(){
var pageActive=o.pager.find('a.pageActive');
var s=$(this);
if(pageActive.prev().text()=='上一頁(yè)'){
alert('已經(jīng)是第一頁(yè)!');
return false;
}
pageActive.removeClass('pageActive');
pageActive.prev().addClass('pageActive');
o.currentPage=pageActive.prev().text();
$.page.loadData(o);
});
var next=$('<a/>').html('<span>下一頁(yè)</span>').addClass('pageA nextAll').unbind('click').bind('click',function(){
var pageActive=o.pager.find('a.pageActive');
var s=$(this);
if(pageActive.next().text()=='下一頁(yè)'){
alert('已經(jīng)是最后一頁(yè)!');
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)前的頁(yè)面加上了pageActive類，所以現(xiàn)在我們可以實(shí)現(xiàn)$.page的getCurrentPage函數(shù)，非常簡(jiǎn)單

復(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)前頁(yè)刷新數(shù)據(jù)
o.currentPage = $.page.getPageSize(o);
o.pageSize = $.page.getCurrentPage(o);
$.page.loadData(o);
return;
}
$.page.loadData(o);
$.line.handleQueryLine(o);
})
}

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

復(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;
}

大功告成！！

DEMO 下載

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：瑤疏影 > 《JQuery》

舉報(bào)/認(rèn)領(lǐng)