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代码有点问题，显示的居然是带了很多标记的东东，重新编辑了下，看起来应该会好一点