(jQuery)實現簡單的分頁控件

原創 麥田兔子 2018-09-11 04:29

原文地址：

http://www.cnblogs.com/gxll1314/archive/2010/10/08/1845651.html


1：效果圖

2：素材

3：編碼

3.1思考

需要做什麼？

1：分頁控件需要向後臺發送請求，發送的參數包括當前頁，每頁顯示數量，查詢條件；並且獲取數據加載到當前頁面；

2：進行修改刪除操作的時候能記住當前頁；

3：查詢後翻頁的時候可以可以記住當前查詢的條件

3.2實現

HTML

?
1
2
3
4
5
<!--存儲數據的容器-->
<divclass="tableData">
</div>
<!--分頁控件顯示-->
<divclass="pageBar"></div>

jQuery

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

?
1
2
3
4
5
6
7
8
9
(function($){
$.fn.simplePage=function(o){
varoptions={
//配置參數
};
return//sth
}
})(jQuery)

默認有哪些參數呢？

由於需要發送當前頁，每頁顯示數量，所以需要 currentPage，pageSize 兩個基本參數；

由於需要查詢表格內容，所以需要一個放置查詢條件的表單 form；

由於需要修改刪除後記住當前頁，所以需要一個標誌指示當前進行的是何操作type；

爲了使我們的程序更具有靈活性，加上獲取數據後需要加載到的container，還有就是分頁控件加載的pager，

具體如下

?
1
2
3
4
5
6
7
8
9
10
11
varoptions={
pager: '.pager',//表格控件的容器
container: '.tableData',//放置表格數據的容器
form: '#form',//放置查詢條件的表單
pageForm: '#pageForm',//放置隱藏與的Div
url: '',//發送請求的地址
currentPage: 1,
pageSize: 2
type: null,//可選：action,
pageShow:7
}

爲了便於維護，我們聲明一個獨立的對象來進行獲取數據，綁定事件的操作，我們將這個函數命名爲$.page

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$.page = {
//
setPage: function(o){
},
//獲取當前頁
getCurrentPage: function(o){
},
//獲取每頁顯示數量
getPageSize: function(o){
},
//生成發送所需要的json數據
genData: function(o){
},
//發送數據
loadData: function(o){
}
}

實現以上所聲明的函數，當分頁第一次加載的時候，我們需要從服務器獲取總頁數來生成分頁控件，所以首先實現loadData函數

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
loadData: function(o){
varthat = this;
vardata = that.genData(o);
$.ajax({
url: o.url,
data: data,
type: 'post',
dataType: 'html',
cache: false,
success: function(result){          
varres = $(result).find('tbody').html();
vartotalPage = $(result).find('#totalPage').val();
varcurrentPage = $(result).find('#currentPage').val();
o.currentPage=currentPage;
o.pager.empty();
$.line.setLine(totalPage,o);    //調用生成分頁控件的函數                          
},
error: function(){
alert("error");
}
})
}

下面我們實現上面生成分頁控件的函數$.line.setLine

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$.line={
setLine:function(totalPage,o){
for(vari=0;i<totalPage;i++){
vara=$('<a/>').html('<span>'+(i+1)+'</span>').addClass('pageA').bind('click',function(){
vars=$(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);
}
varlimit=this.getLimit(o,totalPage);
varaPage=o.pager.find('a.pageA').not('a.previous,a.nextAll,a.record');
aPage.hide();
aPage.slice(limit.start,limit.end).show();
varprev=$('<a/>').html('<span>上一頁</span>').addClass('pageA previous').unbind('click').bind('click',function(){
varpageActive=o.pager.find('a.pageActive');
vars=$(this);
if(pageActive.prev().text()=='上一頁'){
alert('已經是第一頁!');
returnfalse;
}
pageActive.removeClass('pageActive');
pageActive.prev().addClass('pageActive');
o.currentPage=pageActive.prev().text();
$.page.loadData(o);
});
varnext=$('<a/>').html('<span>下一頁</span>').addClass('pageA nextAll').unbind('click').bind('click',function(){
varpageActive=o.pager.find('a.pageActive');
vars=$(this);
if(pageActive.next().text()=='下一頁'){
alert('已經是最後一頁!');
returnfalse;
}
pageActive.removeClass('pageActive');
pageActive.next().addClass('pageActive');
o.currentPage=pageActive.next().text();
$.page.loadData(o);
});
varpageActiveText=o.pager.find('a.pageActive').text();
varrecord=$('<a/>').html('<span>'+pageActiveText+'/'+totalPage+'</span>').addClass('pageA record');
o.pager.prepend(prev).prepend(record).append(next);
}
}

在上面的代碼中我們給當前的頁面加上了pageActive類，所以現在我們可以實現$.page的getCurrentPage函數，非常簡單

?
1
2
3
4
getcurrentPage: function(o){
varp = o.pager.find("a.pageActive").text();
returnp;  
}

接着我們實現生成json數據的genData函數，json格式爲{key:value,key:value}

?
1
2
3
4
5
genData: function(o){
varsdata = $.extend({}, { "currentPage": o.currentPage,
"pageSize": o.pageSize}, $.jsonObj(o.pageForm));
returnsdata;
},

上面的$.jsonObj爲自定義的函數，爲了生成我們需要的json格式以便發送查詢的數據，只支持input，select

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$.jsonObj = function(form){
//判斷是否有序列化的東東
if(!$(form).html() || $(form).html() == null|| $.trim($(form).html()) == "") {
returnnull;
}
varformEl = $(form).find('input[type="text"]');
varformselect = $(form).find('select');
varjson = "{";
for(vari = 0; i < formEl.length - 1; i++) {
varname = formEl.eq(i).attr('name');
varval = "'"+ formEl.eq(i).val() + "'";
json += name;
json += ":";
json += val;
json += ",";
}
varlname = formEl.eq(formEl.length - 1).attr('name');
varlval = "'"+ formEl.eq(formEl.length - 1).val() + "'";
json += lname;
json += ":";
json += lval;
if(formselect) {
json += ",";
for(vari = 0; i < formselect.length - 1; i++) {
varname = formselect.eq(i).attr('name');
varval = "'"+ formselect.eq(i).val() + "'";
json += name;
json += ":";
json += val;
json += ",";
}
varlname = formselect.eq(formselect.length - 1).attr('name');
varlval = "'"+ formselect.eq(formselect.length - 1).val() + "'";
json += lname;
json += ":";
json += lval;
}
json += "}";
varjsonObj = eval("("+ json + ")")
returnjsonObj;
}

接着我們爲查詢表單的按鈕綁定事件，我們擴展下我們的$.page函數

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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(){
varvals = $(this).val();
vars = $(this).clone().val(vals);
$(o.pageForm).append(s);
});
$(o.form).find('select').each(function(){
varvals = $(this).val();
vars = $(this).clone().val(vals);
$(o.pageForm).append(s);
});
$.page.query(o);
});
}

ok，基本的函數已經完成，下面完成主函數

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$.fn.simplePage = function(os){
varoptions = {
pager: '.pager',//表格控件的容器
container: '.tableData',//放置表格數據的容器
form: '#form',//放置查詢條件的表單
pageForm: '#pageForm',//放置隱藏與的Div
url: '',//發送請求的地址
currentPage: 1,
pageSize: 2,
type: null,//可選：action,
pageShow:7//,
};
varo = $.extend(options, os);
returnthis.each(function(){
o.pager = $(this).find(o.pager);
o.container = $(this).find(o.container);
//首先清除click事件
o.pager.unbind('click');
if(o.type == 'action') {
//指定的動作，比如刪除時的事件，這時需要在當前頁刷新數據
o.currentPage = $.page.getPageSize(o);
o.pageSize = $.page.getCurrentPage(o);
$.page.loadData(o);
return;
}
$.page.loadData(o);
$.line.handleQueryLine(o);
})
}

現在我們的分頁還不是很好看，我們用firebug查看下生成的分頁結構，寫了如下樣式

?




.pager a {
display: block;
float: left;
width: 16px;
height: 16px;
margin: 5px;
}
.pager a.pageA{
background:url("../images/grid/page.png") no-repeatleft0pxtransparent;
display:inline-block;
font-size:14px;
margin:03px;
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-repeatright0pxtransparent;
display:inline-block;
height:24px;
line-height:22px;
padding-right:6px;
}
.pager a.pageActive{
background:url("../images/grid/page.png") no-repeatleft-24pxtransparent;
}


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Django-自定義分頁

jedi911 2019-02-23 00:42:19

jsp分頁總結

624126837 2019-02-23 00:32:15

MySQL存儲過程

sukunwu 2019-02-23 00:29:13

Jquery

s5650326 2019-02-23 13:06:21

jQuery 元素搜索

liudajiang 2019-02-23 12:53:51

jquery 甘特圖開發指南

bokezyyx 2019-02-23 00:42:21

（JQuery學習筆記）利用jquery製作網頁導航定位

w1sw 2019-02-23 00:33:03

Jquery總結

kouxiaomou 2019-02-23 00:20:06

jquery筆記

00_yatou 2019-02-23 00:16:07

Ajax表單提交插件jquery form

網頁前端 2019-02-23 00:15:56

js 事件綁定的方法

tutu2 2019-02-23 00:14:28

jQuery和AJAX

tutu2 2019-02-23 00:14:28

jQuery中綁定事件的幾種方法

tutu2 2019-02-23 00:14:28

C#異步調用

followMyH 2019-02-23 00:41:05

PHP 如何實現異步

jingwul 2019-02-23 00:30:32