建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

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

时间:2010-10-10 22:21来源: 作者: 点击:
复制代码 代码如下: $.line={ setLine:function(totalPage,o){ for(var i=0;itotalPage;i++){ var a=$('a/').html('span'+(i+1)+'/span').addClass('pageA').bind('click',function(){ var s=$(this); s.siblings()

复制代码 代码如下:

$.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 下载 (责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片