`
m635674608
  • 浏览: 4932020 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js 分页 对象

    博客分类:
  • js
 
阅读更多
var asyncSubmit = function(formId){
	var formObj = $('#'+formId);
	var asyncFlag = formObj.find("input[name='asyncFlag']").val();
	var prefix = formObj.find("input[name='alias']").val();
	var replaceId = formObj.find("input[name='replaceId']").val();
	
	$('#currentPageHid_'+prefix).val(1);
	if(asyncFlag=='true'){
		var url = getContextPath() + formObj.attr('action');
		PageInfoUtil.ajaxSubmitReplaceByElement(url, formObj.serialize(),replaceId,replaceId);
	}else{
		formObj.submit();
	}
};

var PageInfoUtil = PageInfoUtil || {};

PageInfoUtil.ajaxCommFunPage = function(url, data, callback) {
	jQuery.ajax({
		type : "post",
		async: false,
		//dataType:'html',
		url : url,
		timeout: 30000,
		data : data,
		success : callback
	});
};

/**
 * 请求提交抓取附加节点
 */
PageInfoUtil.ajaxSubmitAppendByElement = function(url,data,catchId,appendId){
	PageInfoUtil.ajaxCommFunPage(url, data, function(str){
		var ss = $(str).find('#'+catchId).html();
		$('#'+appendId).append(ss);
	});
};

/**
 * 请求提交抓取替换节点
 */
PageInfoUtil.ajaxSubmitReplaceByElement = function(url,data,catchId,replaceId){
	PageInfoUtil.ajaxCommFunPage(url, data, function(str){
		var ss = $(str).find('#'+catchId).html();
		$('#'+replaceId).html(ss);
	});
};



var initPageTab =  function(json){
	PageInfoFactory.createPageInfoFm(json);
};

var PageInfoFactory = PageInfoFactory || {};

/**
 * fm 项目分页模板
 */
PageInfoFactory.createPageInfoFm=function (json){
	//var formId = json["formId"];//form表单的Id
	var divId = json["divId"];//form表单内分页标签的DIVId
	var asyncFlag  = json["asyncFlag"];//刷新,无刷新标志 
	var prefix = json["prefix"];//分页标签的标志
	var currentPage = json["currentPage"];//当前页
	var totalPage = json["totalPage"];//一共多少页
	var count = json["count"];//总数
	var pageSize = json["pageSize"];//每页多少条
	var replaceId = json["replaceId"];//需要替换的ID
	if(replaceId == null){
		replaceId = json["formId"];
	}
	
	    
	//初始化页面
    var str = $('#'+divId).html();
    str = str.replace(/currentPageAlias/g,currentPage);
    str = str.replace(/totalPageAlias/g,totalPage);
    str = str.replace(/countAlias/g,count);
    str = str.replace(/pageSizeAlias/g,pageSize);
    str = str.replace(/asyncFlagAlias/g,asyncFlag);
    str = str.replace(/aliasAlias/g,prefix);
    str = str.replace(/replaceIdAlias/g,replaceId);
    str = str.replace(/prefix/g,prefix);
    
    var pageDiv = $('#'+divId);
    pageDiv.html(str);
	var pageStr = PageInfoFactory.createPageInfoFm.getPageSrc(currentPage,pageSize,totalPage,count);
	
	
	//设置页面
	$('#pagingitem_'+prefix).html(pageStr);
	//设置总数 
	$('#totalpage_'+prefix).html(count);
	
	pageDiv.find('[tag=paging-action]').click(function() {
		PageInfo.search(json,std.oid(this),pageSize);
	});
	
	pageDiv.find('#gotoNo_'+prefix).delegate(this,'click',function() {
		PageInfo.goToCurrPageBtn(json,pageSize,totalPage,'pageNo');
	});
	
	pageDiv.find('#pageNo_'+prefix).delegate(this,'keypress',function(e) {
		if (e && e.keyCode == 13) {
			PageInfo.goToCurrPageBtn(json,pageSize,totalPage,'pageNo');
		}
	});
	
};

/**
 * 获取fm的分页字符串
 */
PageInfoFactory.createPageInfoFm.getPageSrc = function(currentpage,pagesize,totalpage,totalsize){
	
		var pg = {};
		pg.currentpage = parseInt(currentpage);
		pg.pagesize = parseInt(pagesize);
		pg.totalpage = parseInt(totalpage);
		pg.totalsize = parseInt(totalsize);

		if (pg.totalpage <= 5) {//五页内
			var middle = [];
			for (var num = 1; num <= pg.totalpage; num++) {
				middle.push(num);
			}
			return PageInfoFactory.createPageInfoFm.renderDom(middle, pg.currentpage, false, false,pg);

		} else if (pg.currentpage <= 3) {//当前页为3页内
			var middle = [ 1, 2 ];
			if (pg.currentpage >= 2) {
				middle.push(3);
			}
			if (pg.currentpage >= 3) {
				middle.push(4);
			}
			return PageInfoFactory.createPageInfoFm.renderDom(middle, pg.currentpage, false, true,pg);

		} else if (pg.totalpage - pg.currentpage <= 2) {//当前页为倒数三页内
			var middle = [];
			if (pg.currentpage <= pg.totalpage - 2) {
				middle.push(pg.totalpage - 3);
			}
			if (pg.currentpage <= pg.totalpage - 1) {
				middle.push(pg.totalpage - 2);
			}
			middle.push(pg.totalpage - 1);
			middle.push(pg.totalpage);

			return PageInfoFactory.createPageInfoFm.renderDom(middle, pg.currentpage, true, false,pg);

		} else {//当前页在中间
			return PageInfoFactory.createPageInfoFm.renderDom([ pg.currentpage - 1, pg.currentpage, pg.currentpage + 1 ], pg.currentpage, true, true,pg);
		}
};

PageInfoFactory.createPageInfoFm.renderDom = function(middle, active, showMore1, showMore2,pg) {
	var html = '<div class="c_page_num"' + std.flag('paging-action', (active > 1 ? active - 1 : 1)) + '>&lt;</div>';
	if (showMore1) {
		html += '<div class="c_page_num"' + std.flag('paging-action', 1) + '>1</div><div class="c_page_more">...</div>';
	}
	$(middle).each(function(key, item) {
		html += '<div class="c_page_num ' + (active == item ? 'active' : '') + '"' + std.flag('paging-action', item) + '>' + item + '</div>';
	});
	if (showMore2) {
		html += '<div class="c_page_more">...</div><div class="c_page_num"' + std.flag('paging-action',pg.totalpage) + '>' +pg.totalpage + '</div>';
	}
	html += '<div class="c_page_num"' + std.flag('paging-action', (active <pg.totalpage ? active + 1 :pg.totalpage)) + '>&gt;</div>';

	return html;
};



/**
 * 上一页 下一页 基础分页模板
 */
PageInfoFactory.createPageInfoBaic=function (json){
	//var formId = json["formId"];//form表单的Id
	var divId = json["divId"];//form表单内分页标签的DIVId
	var asyncFlag  = json["asyncFlag"];//刷新,无刷新标志 
	var prefix = json["prefix"];//分页标签的标志
	var currentPage = json["currentPage"];//当前页
	var totalPage = json["totalPage"];//一共多少页
	var count = json["count"];//总数
	var pageSize = json["pageSize"];//每页多少条
	var replaceId = json["replaceId"];//需要替换的ID
	if(replaceId == null){
		replaceId = json["formId"];
	}
	
	    
	//初始化页面
    var str = $('#'+divId).html();
    str = str.replace(/currentPageAlias/g,currentPage);
    str = str.replace(/totalPageAlias/g,totalPage);
    str = str.replace(/countAlias/g,count);
    str = str.replace(/pageSizeAlias/g,pageSize);
    str = str.replace(/asyncFlagAlias/g,asyncFlag);
    str = str.replace(/aliasAlias/g,prefix);
    str = str.replace(/replaceIdAlias/g,replaceId);
    str = str.replace(/prefix/g,prefix);
    
	$('#'+divId).html(str);
		
  //绑定事件		
  $('#firstPage_'+prefix).delegate(this,'click', function() {
	  PageInfo.firstPage(json,1,pageSize);
    });	
   $('#prePage_'+prefix).delegate(this,'click', function() {
	   PageInfo.prePage(json,currentPage,totalPage,pageSize);
    });
    
    $('#nextPage_'+prefix).delegate(this,'click', function() {
    	PageInfo.nextPage(json,currentPage,totalPage,pageSize);
    });
    
    $('#finalPage_'+prefix).delegate(this,'click', function() {
    	PageInfo.finalPage(json,totalPage,pageSize);
    }); 
    
    $('#finalPage_'+prefix).delegate(this,'click', function() {
    	PageInfo.finalPage(json,totalPage,pageSize);
    }); 
    
    $('#goToCurrPageBtn_'+prefix).delegate(this,'click', function() {
    	PageInfo.goToCurrPageBtn(json,pageSize,totalPage);
    }); 
    
    $('#currPageIpt_'+prefix).delegate(this,'keypress', function(event) {
    	if(event.keyCode == "13")    
        {
    		PageInfo.goToCurrPageBtn(json,pageSize,totalPage);
        }
    }); 
	
};

var PageInfo = PageInfo || {};
PageInfo.search = function(json,currentPage, pageSize) {
	var formId = json["formId"];
	var asyncFlag  = json["asyncFlag"];
	var prefix  = json["prefix"];
	var replaceId = json["replaceId"];
	if(replaceId == null){
		replaceId = json["formId"];
	}
	
	$('#currentPageHid_'+prefix).val(currentPage);
	$('#pageSizeHid_'+prefix).val(pageSize);
	
	var  formObj = $("#"+formId);
	
	var url = getContextPath() + formObj.attr('action');
	if(asyncFlag){
		PageInfoUtil.ajaxSubmitReplaceByElement(url, formObj.serialize(),replaceId,replaceId);
	}else{
		formObj.submit();
	}
};

PageInfo.prePage = function(json,currentPage, totalPage, pageSize) {
	if (currentPage <= 1) {
		currentPage = 1;
	} else {
		currentPage = currentPage - 1;
	}
	PageInfo.search(json,currentPage, pageSize);
};
PageInfo.nextPage = function(json,currentPage, totalPage, pageSize) {
	if (currentPage >= totalPage) {
		currentPage = totalPage;
	} else {
		currentPage = currentPage + 1;
	}
	PageInfo.search(json,currentPage, pageSize);
};

PageInfo.firstPage = function(json,currentPage, pageSize) {
	PageInfo.search(json,currentPage, pageSize);
};

PageInfo.finalPage = function(json,currentPage, pageSize) {
	PageInfo.search(json,currentPage, pageSize);
};

PageInfo.goToCurrPageBtn = function(json,pageSize, totalPage,keyId) {
	var prefix = json["prefix"];
	var currPageIptObj = null;
	if(keyId==null){
		currPageIptObj = $("#currPageIpt_"+prefix);
	}else{
		currPageIptObj = $("#"+keyId+"_"+prefix);
	}
	var currPageIpt = currPageIptObj.val();
	if (currPageIpt == "") {
		currPageIptObj.val("");
		win.msg.short("请输入跳转页数!", "W01");
	} else if (parseInt(currPageIpt) > totalPage) {
		currPageIptObj.val("");
		win.msg.short("你输入的页数超出总页数,请输入正确的页数!", "W01");
	} else if (parseInt(currPageIpt) <= 0) {
		currPageIptObj.val("");
		win.msg.short("你输入的页数小于1,请输入正确的页数!", "W01");
	} else {
		PageInfo.search(json,parseInt(currPageIpt), pageSize);
	}
};

 

分享到:
评论

相关推荐

    js对象分页插件

    解决对象传入遍历,并且实现模板标签替换,使用者无需再去模板中更改属性,只需要把对应的属性传递进去就可以了。适合于排行,数据展示之类的分页

    简单易懂js分页(已封装)

    简单易懂的js分页,已经分装好,通俗易懂

    JS分页效果JS分页效果

    //对象名称 this.page = 1; //当前页数 this.pageCount = 1; //总页数 this.argName = 'page'; //参数名 this.showTimes = 1; //打印次数 } showPages.prototype.getPage = function(){ //丛url获得当前页数,...

    JS 实现web分页打印功能

    使用JS的Window对象的Print方法实现兼容性强的分页打印功能,可直接运行,代码直接复制即可用。

    纯JAVASCRIPT实现分页

    得用JavaScript面向对象编程,编写了一个分页通过控件。代码精简,功能强大.

    laypage - 多功能JavaScript分页组件 v1.3.zip

    laypage - 多功能JavaScript分页组件v1.3 更新日志: 1. 修复当pages(总页数)为0时,仍然输出了【下一页】的bug 2. 修复当不满足出现分页条件时,抛出了Cannot read property 'children' of null的bug 3. 将...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    NULL 博文链接:https://redboy5711.iteye.com/blog/259913

    C#+ajax+js 写的公用分页,在任何程序中直接引用脚本就可以当分页控件使用

    这个是我直接用javascript对象加ajax写的一个公用分页,后台是用C#写的!直接引用一个脚本文件和一个分页的样式文件就可以使用了,项目中有示例和使用视频,绝对很便捷,不需要引用任何特别的DLL或使用其他特别的技术,...

    原生js编写基于面向对象的分页组件

    主要为大家详细介绍了原生js编写基于面向对象的分页组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    nestjs-typeorm-paginate:分页响应对象函数 + typeorm + nestjs 的类型

    Nestjs Typeorm 分页 TypeORM 存储库或具有严格类型的 queryBuilder 的分页助手方法 安装 $ yarn add nestjs-typeorm-paginate 要么 $ npm i nestjs-typeorm-paginate 用法 服务 存储库 import { Injectable } ...

    Ext3.2的TreePanel和GridPanel的分页与Hibernate的分页功能的影射

    环境:Windows XP sp3、IE 7.0、MS SQL Server 2000、MyEclipse5.5、 Ext 3.2、Tomcat 6.0 使用步骤: 1、下载解压之后,使用IDE打开工程 2、在工程中找到“数据库脚本.sql”...阅读条件:熟悉JavaScript的DOM编程技术

    JavaScript实现前端分页控件

    现在web注重用户体验与交互性,ajax 提交数据的... 本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象,其实是一样的对于后者只不过将四个参数放在一个对象中。pIndex:每次请求的页码,p

    struts2+ajax 发送jquery请求分页,返回josn对象,引用js自动解析

    struts2+ajax 发送jquery请求分页,返回josn对象,引用js自动解析,有jar包

    JS 使用 window对象的print方法实现分页打印功能

    最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题。  1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-...

    JSTL JSP 自定义标签 分页

    jh-plugins是一项基于...${PageModel对象}" pageStep="5" javaScript="" styleClass="" viewURL=""/&gt; 祝您使用愉快,谢谢! 作者:Hardy(admin@xkshow.cn) 项目开源地址:http://code.google.com/p/jh-plugins/

    myPage分页原生插件

    利用原生js对象的方式实现分页插件,可以基本满足分页的功能,这里上传的资源包含了myPage.js源代码以及相关的demo案例,具体实现可参考该案例。如果实在不想付积分的也可以到我的简书上下载...

    HTML print打印(分页,统计,排版)

    方案一(适用于动态页面)分层结构 方案二(适用于静态页面)... * StringtoJSON 将JSON的String字符,转换成JS对象数据 * getalign 字符切换 对应setAlign 方法 * SumTable 计算表的列("2,3,4") 对应层级TABLE **/

    asp+ajax静态分页

    &lt;script language="javascript" type="text/javascript"&gt; &lt;!-- function createAjax() { //该函数将返回XMLHTTP对象实例 var _xmlhttp; try { _xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的创建...

    ASP.ENT中应用javascript分页

    //建立div对象 div.innerHTML=zz[(e-1)*pagesize+i]//建立显示元素 document.getElementById("all").appendChild(div);//加入all中 if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出 break } var ye="

Global site tag (gtag.js) - Google Analytics