当前位置: 开发笔记 > 前端 > 正文

基于jQuery的实现简单的分页控件

作者：shadowsuyan3 | 来源：互联网 | 2022-10-13 18:17

分页控件需要向后台发送请求，发送的参数包括当前页，每页显示数量，查询条件；并且获取数据加载到当前页面

1：效果图

2：素材

3：编码
3.1思考
需要做什么？
1：分页控件需要向后台发送请求，发送的参数包括当前页，每页显示数量，查询条件；并且获取数据加载到当前页面；
2：进行修改删除操作的时候能记住当前页；
3：查询后翻页的时候可以可以记住当前查询的条件

3.2实现
HTML

代码如下:

jQuery
为了我们的控件可以随意使用，我们将其写成插件的形式，首先搭个框架，我们将插件命名为simplePage

代码如下:

 
(function($){ 
$.fn.simplePage=function(o){ 
var optiOns={ 
//配置参数 
}; 
return //sth 
} 
})(jQuery) 

默认有哪些参数呢？
由于需要发送当前页，每页显示数量，所以需要 currentPage，pageSize 两个基本参数；
由于需要查询表格内容，所以需要一个放置查询条件的表单 form；
由于需要修改删除后记住当前页，所以需要一个标志指示当前进行的是何操作type；
为了使我们的程序更具有灵活性，加上获取数据后需要加载到的container，还有就是分页控件加载的pager，
具体如下

代码如下:

 
var optiOns={ 
pager: '.pager',//表格控件的容器 
container: '.tableData',//放置表格数据的容器 
form: '#form',//放置查询条件的表单 
pageForm: '#pageForm',//放置隐藏与的Div 
url: '',//发送请求的地址 
currentPage: 1, 
pageSize: 2 
type: null,//可选：action, 
pageShow:7 
} 

为了便于维护，我们声明一个独立的对象来进行获取数据，绑定事件的操作，我们将这个函数命名为$.page

代码如下:

 
$.page = { 
// 
setPage: function(o){ 
}, 
//获取当前页 
getCurrentPage: function(o){ 
}, 
//获取每页显示数量 
getPageSize: function(o){ 
}, 
//生成发送所需要的json数据 
genData: function(o){ 
}, 
//发送数据 
loadData: function(o){ 
} 
} 

实现以上所声明的函数，当分页第一次加载的时候，我们需要从服务器获取总页数来生成分页控件，所以首先实现loadData函数

代码如下:

 
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); //调用生成分页控件的函数 
}, 
error: function(){ 
alert("error"); 
} 
}) 
} 

下面我们实现上面生成分页控件的函数$.line.setLine

代码如下:

$.line={
setLine:function(totalPage,o){
for(var i=0;ivar a=$('').html(''+(i+1)+'').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=$('').html('上一页').addClass('pageA previous').unbind('click').bind('click',function(){
var pageActive=o.pager.find('a.pageActive');
var s=$(this);
if(pageActive.prev().text()=='上一页'){
alert('已经是第一页!');
return false;
}
pageActive.removeClass('pageActive');
pageActive.prev().addClass('pageActive');
o.currentPage=pageActive.prev().text();
$.page.loadData(o);
});
var next=$('').html('下一页').addClass('pageA nextAll').unbind('click').bind('click',function(){
var pageActive=o.pager.find('a.pageActive');
var s=$(this);
if(pageActive.next().text()=='下一页'){
alert('已经是最后一页!');
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=$('').html(''+pageActiveText+'/'+totalPage+'').addClass('pageA record');
o.pager.prepend(prev).prepend(record).append(next);
}
}

在上面的代码中我们给当前的页面加上了pageActive类，所以现在我们可以实现$.page的getCurrentPage函数，非常简单

代码如下:

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

接着我们实现生成json数据的genData函数，json格式为{key:value,key:value}

代码如下:

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

上面的$.jsonObj为自定义的函数，为了生成我们需要的json格式以便发送查询的数据，只支持input，select

代码如下:

 
$.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 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 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; 
} 

接着我们为查询表单的按钮绑定事件，我们扩展下我们的$.page函数

代码如下:

 
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，基本的函数已经完成，下面完成主函数

代码如下:

 
$.fn.simplePage = function(os){ 
var optiOns= { 
pager: '.pager',//表格控件的容器 
container: '.tableData',//放置表格数据的容器 
form: '#form',//放置查询条件的表单 
pageForm: '#pageForm',//放置隐藏与的Div 
url: '',//发送请求的地址 
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') { 
//指定的动作，比如删除时的事件，这时需要在当前页刷新数据 
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-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; 
} 