myPagination6.0分页-ajax

最近项目中有使用到分页，总算吧唧出来了，总结一下方便以后使用。

由于公司内部开发工具的限制，导致那些老代码的jsp都没有习惯性的加上头文件，ie运行时直接进入Quirks模式(杂项/兼容模式)，因为本人新搭建的项目框架使用的是公司

的老样式(标准模式跟兼容模式样式多不兼容)，而且网上的分页插件很多都不能支持Quirks模式，最后找到了myPagination6.0。

一开始也看了网上的介绍，大多记录的不详细，这对于不熟悉前端的童鞋依旧有很多麻烦，这里就详细的记录下，也方便自己以后使用。不废话了，搞起......

使用的时候在需要显示的位置加一个div：

<div id="myPagination"></div>

js代码如下：

$(function() {
	var pageNo = $('#pageNo').val();//当前页
	var pageCount = $('#pageCount').val();//总页数
	$("#myPagination").myPagination({
        	cssstyle: 'scott',currPage: parseInt(pageNo),pageCount: parseInt(pageCount),panel: {
	            	tipInfo_on: true,tipInfo: '  跳{input}/{sumPage}页',tipInfo_css: {
	            		width: '25px',height: "20px",border: "2px solid #f0f0f0",padding: "0 0 0 5px",margin: "0 5px 0 5px",color: "#88af3f"
            		}
          	},ajax:{
 			onClick:function(pageNo){
 				$('#pageNo').val(pageNo);
		             	//开启提示代码,需导入msgBox.js文件与样式.
		             	ZENG.msgBox.show(" 正在加载"+pageNo+"页，请稍后...",6,1000); 
	        	     	var varParams = "?pageNo="+pageNo;
	  	        	//如果是多条件查询，则需序列化表单，或自己组装参数
		             	var form1 = $("#form1").serialize(); //序列化表单
		             	form1 = decodeURIComponent(form1,true); //解码
	        	     	varParams = varParams + '&' + form1;
	             		window.location.href = '<%=path%>/serviceCode.do'+varParams;
     			}
      		}
        });
 });

可能有些人会疑惑当前页/总页数是怎么传进去的，只要在获取后台返回的数据的列表后面加一个隐藏域即可，

见代码：

<input type="hidden" id="pageNo" value="${parameters.Request.pageNo}" />
<input type="hidden" id="pageCount" value="${pageCount}" />

value的值是jstl从springmvc后台获取的值，为了更详细的展示，下面贴出springmvc部分的代码：

java代码：

@RequestMapping("/serviceCode.do")
	public ModelAndView handleRequest(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		resp.setCharacterEncoding("utf-8");
		List<RetlParaServCodeDTO> list = new ArrayList<RetlParaServCodeDTO>();
		Map<Object,Object> mapResult = new HashMap<Object,Object>();
		
		/* 
		 * 封装请求参数到对象,并继承pageDTO,后面会把pageDTO参数设置到该对象中
		 */
		RetlParaServCodeDTO param = new RetlParaServCodeDTO();
		// 设置请求参数 pageNo:请求页
		param.setPageCount(-1);
		String sPageNo = req.getParameter("pageNo");
		if(!"".equals(sPageNo) && sPageNo != null){
			int pageNo = Integer.parseInt(sPageNo);
			param.setPageNo(pageNo); // 前端传入当前页数
		}
		
		// 查询条件
		String servCode = req.getParameter("servCode");
		if(!"".equals(servCode) && servCode != null){
			param.setCmp_serv_code(servCode);
		}
		String serv_name = req.getParameter("serv_name");
		if(!"".equals(serv_name) && serv_name != null){
			param.setServ_name(serv_name);
		}
		String used_flag = req.getParameter("used_flag");
		if(!"".equals(used_flag) && used_flag != null){
			param.setUsed_flag(used_flag);
		}
		
		list = businessDataService.getParaServCodeList(param);
		mapResult.put("Result",list);
		mapResult.put("Request",param);
		return new ModelAndView("param/serviceCode","parameters",mapResult);
	}

到这里，功能其实还没有完全实现，你会发现分页输入框写值后按回车键，虽然分页按钮已经定位到你输入的当前页，但是并没有触发ajax里面的click事件，也就没有请求到后台，怎么处理呢？之前在网上看了ajax提交后在回调函数里面显示数据列表，由于显示的字段较多，感觉这样很麻烦。于是我就该了mypagination6.0的源码，使其在输入跳转页后触发click事件，修改部分的代码如下。

myPagination6.0.js：

obj.children(":text").keypress(function(a){
	var b=a.which;
	if(13==b){
		var c=$.trim($(this).val());
		obj.children("a").unbind("click"),obj.children("a").each(function(){
			$(this).click(function(){
				return!1
			})
		}),opts.currPage=c,opts.ajax.onClick(c),
		onRequest()
		!1
	}
}),

其中标红的两行是我加上去的，这样在检测到键盘按下的是回车键(13==Enter)的时候就能触发click事件，就可以提交到后台了。

至于样式引用page.css文件，里面提供了多种样式供你选择。到这里应该是比较详细的ajax请求的分页方式了，上效果图：

在公司里面不能上传源码文件，直接贴上来太长太难看，回去的时候再补上，在网上也可以下载到myPagination6.0即可。

如果还有什么不明白的可以留言~

下午粘贴的js代码有点问题，显示的居然是带了很多标记的小编，重新编辑了下，看起来应该会好一点

myPagination6.0分页-ajax

相关推荐