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


Posted in Javascript onOctober 10, 2010

1:效果图
基于jQuery的实现简单的分页控件
2:素材
基于jQuery的实现简单的分页控件
3:编码
3.1思考
需要做什么?
1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件;并且获取数据加载到当前页面;
2:进行修改删除操作的时候能记住当前页;
3:查询后翻页的时候可以可以记住当前查询的条件

3.2实现
HTML

<!--存储数据的容器--> 
<div class="tableData"> 
</div> 
<!--分页控件显示--> 
<div class="pageBar"></div>

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;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('已经是第一页!'); 
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('已经是最后一页!'); 
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); 
} 
}

在上面的代码中我们给当前的页面加上了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 < 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; 
}

接着我们为查询表单的按钮绑定事件,我们扩展下我们的$.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; 
}

大功告成!!

DEMO 下载

Javascript 相关文章推荐
javascript 定义初始化数组函数
Sep 07 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
微信小程序实现聊天室
Aug 21 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 #Javascript
Tips 带三角可关闭的文字提示
Oct 06 #Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 #Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 #Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 #Javascript
jquery选择器(常用选择器说明)
Sep 28 #Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 #Javascript
You might like
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python之父谈Python的未来形式
2016/07/01 Python
发布你的Python模块详解
2016/09/15 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python实现串口自动触发工作的示例
2019/07/02 Python
利用Python实现kNN算法的代码
2019/08/16 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python next()和iter()函数原理解析
2020/02/07 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
请介绍一下WSDL的文档结构
2013/03/17 面试题
公司新员工的演讲稿注意事项
2014/01/01 职场文书
骨干教师培训制度
2014/01/13 职场文书
学年自我鉴定
2014/01/16 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
租房安全协议书
2014/08/20 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
教师年度考核个人总结
2015/02/12 职场文书
学期个人自我总结
2015/02/13 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL