基于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 相关文章推荐
JQuery开发的数独游戏代码
Oct 29 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
Python转码问题的解决方法
2008/10/07 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
python如何设置静态变量
2020/09/07 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
电子商务专业个人的自我评价
2013/12/19 职场文书
水利学院求职自荐书
2014/02/01 职场文书
给老婆的道歉信
2015/01/20 职场文书