AJAX实现分页--模拟百度搜索分页
第一部分：效果与分析
1.百度分页组件：
2.自己实现的分页：
3.分析：
百度搜索分页，如果总页数大于10，用户最多只能看到10页内容，不足10页显示全部，当点击下一页时，数字页标向前移动一个单位，当点击上一页时向后移动一个单位。
第二部分：后台实现：
1.实现思路：
后台的处理思想是这样的，通过AJAX向后台发送请求，携带一个分页对象PageBean传过去,查询完毕后返回一个新的PageBean对象。
前台传入的PageBean对象参数：
| 属性 | 名称 | 是否必须 | 默认值 |
| pageSize | 每页数据量 | 非必须 | 30 |
| currentPage | 当前页【用户要取的页】 | 必须 | 1 |
| key | 关键词 | 非必须 | null |
后台处理后获得的PageBean对象:
| 属性 | 名称 | 是否必须 | 默认值 |
| pageSize | 每页数据量 | ||
| currentPage | 当前页【用户要取的页】 | ||
| key | 关键词 | ||
| totalRows | 总行数 | ||
| totalPages | 总页数 | ||
| data | 数据 |
请求参数Demo:{pageSize:10,currentPage:1},获取第一页数据，每页10条。
获取数据Demo:{}。
2.后台处理方法,JAVA实现,此方法传入PageBean对象,获取数据后返回PageBaen对象，前台AJAX请求需要经过中间的控制器来调用此方法，并将数据转换为JSON对象。控制器可用Servlet/Struts/SpringMVC等实现。
/**
* 分页方法
* @param @param page （传入分页对象）,传入每页大小pageSize和需要第几页currentPage
* @param @return
* @return PageBean
* @throws
**/
public PageBean findByPage(PageBean page) {
// TODO Auto-generated method stub int pageSize = page.getPaseSize()!=0?page.getPaseSize():30; //每页数据条数; int currentPage = page.getCurrentPage()>0?page.getCurrentPage():1;//当前第几页 int totalRows = 0; //总的记录数 int totalPages = 0 ;//总的页数 List<Map<String, Object>> datas = null; //查询条件,通过map的方式传入 Map<String, Object> map = new HashMap<String, Object>(); //获取总的记录数 int _totalRows = getSqlSession().selectOne(getMapperFullName("findTotalRows"),map); if(_totalRows==0){ //没有数据 return null; }else{ totalRows = _totalRows; } //计算总的页数 if(_totalRows%pageSize==0){ totalPages = _totalRows/pageSize; }else{ totalPages = _totalRows/pageSize+1; } //判断当前页是否大于总的页数，如果大于则返回最后一页数据 int start = 0; int limit = pageSize; //当请求的页数大于总页数时，返回最后一页数据 if(currentPage>totalPages){ start = (totalPages-1)*pageSize; }else{ start = (currentPage-1)*pageSize; } map.put("start", start); map.put("limit", limit); datas = getSqlSession().selectList(getMapperFullName("find"), map); //查询完毕，设置数据并返回结果 page.setCurrentPage(currentPage>totalPages?totalPages:currentPage); page.setData(datas); page.setPaseSize(pageSize); page.setTotalPages(totalPages); page.setTotalRows(totalRows); return page; }
3.PageBean.java
public class PageBean { protected int paseSize; //每页数据量 protected int currentPage; //当前页 + protected int totalRows; //总记录书 protected int totalPages; //总页数 private List<?> data; //数据 public PageBean() {} }
4.Spring控制器：
@ResponseBody //此注解自动会将page转为JSON @RequestMapping("page") public PageBean findByPage(HttpServletRequest request,HttpServletResponse response,PageBean page){ return this.userService.findByPage(page); }
第二部分：前台实现,使用html和js
1.index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> base page </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="jquery.tmpl.js"></script> <script type="text/javascript" src="basepage.js"></script> <style type="text/css"> .box{ width: 750px; margin: 0 auto; } .page{ padding: 10px 0px 10px 5px; margin:5px 0px; width: 100%; } /*分页链接的样式*/ .page-a{ color: blue; text-decoration: none; border:1px solid #CCC; padding:5px 5px; } .page-a:HOVER { border: 1px #0099cc solid; } /**当前页的文本样式**/ .page-curr-text{ color: black; font-weight: bold; } </style> </head> <body> <div class="box"> <!--数据--> <table id="tab" border="0" style="width:100%;border: 1px solid #CCC;" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC"> </table> <!--分页组件--> <div class="page"></div> </div> <!--数据模版--> <script id="tmpl" type="text/x-jquery-tmpl"> <tr bgcolor="#FFFFFF"> <td>${id}</td> <td>${name}</td> <td>${sex}</td> <td>${birthday}</td> </tr> </script> </body> </html>
2.basepage.js
/**AJAX分页获取数据**/ function getData(_currentPage){ $.ajax({ url:'http://localhost:8089/user/action/page', type:'post', dataType:'jsonp', contentType: 'application/json;charset=utf-8', data:{currentPage:_currentPage,paseSize:5}, error:function(){ alert("request error!"); }, success:function(json){ /**设置数据**/ var data = json.data; /**使用jQuery模版 $("#tab").html($("#tmpl").tmpl(data)); /**生成一个分页工具栏组件**/ var tools = ""; //定义分页html //json数据 var toolsData = {currentPageX:json.currentPage,paseSizeX:json.paseSize,totalPagesX:json.totalPages,totalRowsX:json.totalRows}; //共几页 var totlaBar ="<a class=''>共"+toolsData.totalPagesX+"页</a> "; //首页 var first ="<a class='page-a' href='javascript:void(0);' onclick='getData(1)'>首页</a> "; //上一页 var prev ="<a class='page-a' href='javascript:void(0);' onclick='getData("+(toolsData.currentPageX-1)+")'><上一页</a> "; //中间带数字的页 var page = ""; var t = 10; //用户最多看到10页 var c = toolsData.currentPageX; //当前第几页 //总页数小于10显示全部 if(toolsData.totalPagesX<=10){ for(var i=1;i<toolsData.totalPagesX+1;i++){ page = page + addPage(c,i); } }else{ //总页数大于10 if(c<=6){ for(var i=1;i<c+1;i++){ page = page + addPage(c,i); } for(var i=c+1;i<c+(t-c)+1;i++){ page = page + addPage(c,i); } }else if(c>6 && c<=toolsData.totalPagesX-5){ for(var i=c-5;i<c+1;i++){ page = page + addPage(c,i); } for(var i=c+1;i<c+5;i++){ page = page + addPage(c,i); } }else{ for(var i=c-(t-(toolsData.totalPagesX-c)-1);i<c;i++){ page = page + addPage(c,i); } for(var i=c;i<toolsData.totalPagesX+1;i++){ page = page + addPage(c,i); } } } //下一页 var next ="<a class='page-a' href='javascript:void(0);' onclick='getData("+(toolsData.currentPageX+1)+")'>下一页></a> "; //尾页 var last ="<a class='page-a' href='javascript:void(0);' onclick='getData("+(toolsData.totalPagesX)+")'>尾页</a> "; if(toolsData.currentPageX==1){ tools =totlaBar+page+next+last; }else if(toolsData.currentPageX>1 && toolsData.currentPageX<toolsData.totalPagesX){ tools = totlaBar+first+prev+page+next+last; }else if(toolsData.currentPageX=toolsData.totalPagesX){ tools = totlaBar+first+prev+page; } //设置分页工具栏到 $(".page").html(tools); } }); function addPage(index,i){ var page = ""; if(index==i){ page = "<span class='page-curr-text'>"+i+"</span> "; }else{ page = "<a class='page-a' href='javascript:void(0);' onclick='getData("+i+");'>"+i+"</a> "; } return page; } };
//测试
$(function(){
getData(1);
});
至此搞定...
