基于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 相关文章推荐
js中的异常处理try...catch使用介绍
Sep 21 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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
建立动态的WML站点(三)
2006/10/09 PHP
扩展你的 PHP 之入门篇
2006/12/04 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python贪吃蛇游戏代码
2020/04/18 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python和php哪个容易学
2020/06/19 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
揠苗助长教学反思
2014/02/04 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
建议书范文
2015/02/05 职场文书
罚款通知怎么写
2015/04/22 职场文书
法律进社区活动总结
2015/05/07 职场文书
创业计划之特色精品店
2019/08/12 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
python 如何获取页面所有a标签下href的值
2021/05/06 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技