最近项目中有使用到分页，总算吧唧出来了，总结一下方便以后使用。
由于公司内部开发工具的限制，导致那些老代码的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}" />
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);
}
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即可。
如果还有什么不明白的可以留言~
