最近项目中有使用到分页,总算吧唧出来了,总结一下方便以后使用。
由于公司内部开发工具的限制,导致那些老代码的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即可。
如果还有什么不明白的可以留言~
下午粘贴的js代码有点问题,显示的居然是带了很多标记的东东,重新编辑了下,看起来应该会好一点