复制代码 代码如下:
$.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) |