作者: whooyun发表于: 2017-03-22 00:02
web分页功能需要先理清思路才能更好实现
1、dao层的处理,mybatis(mysql)使用limit进行sql查询处理,比如每页显示10行,则sql如select * from table_name limit 0,10
看这里,java后台分页ArticleMapper.xml(mybatis)-之二
2、PageVo 用来显示分页数据(当前页,总条数,总页数,需要展示的分页数据对象)
看这里,java后台分页PageVO-之一
3、controller控制层(只要知道当前页是第几页就能得出mysql需要从哪一行查询到哪一行)
看这里,java后台分页controller(springMVC)之三
4、jsp前端分页实现需要增加如下代码
<form action="/index" id="showpage"> <input type="hidden" id="currentIndex" name="currentIndex" value="1"> <input type="hidden" id="pgCount" name="pgCount" value="2"> <div class="pagination-center" id="pgDiv"> </div> </form>
/** *当前页码 (分页的标签) */ function clickPage(index){ $('#currentPage').val(index); $('#record_search').submit(); } /* 页面加载完成后则开始生成分页标签。 currentPage 当前页码 maxPageCount 显示多少个页码标签 totalPgCount 总共有多少页数据 pgDivName 显示页面标签的div名字*/ $(document).ready(function(){ var currentPage = $('#currentPage').val(); var maxPageCount =10; var totalPgCount = $('#pgCount').val(); var pgDivName = 'pgDiv'; paping(currentPage,maxPageCount,totalPgCount,pgDivName); }); /* currentPage 当前页码 maxPageCount 显示多少个页码标签 totalPgCount 总共有多少页数据 pgDivName 显示页面标签的div*/ function paping(currentPg, maxPageCount, totalPgCount, pgDivName) { var maxPageCount = Number(maxPageCount); //最大显示页数 var pageCount = Number(totalPgCount); //总页数 var currentPage = Number(currentPg); if(totalPgCount>1){ if(maxPageCount=='Nan'){ console.log("最大显示页数参数传入错误=="+maxPageCount); } if(pageCount=='Nan'){ console.log("总页数参数传入错误=="+pageCount); } if(currentPage=='Nan'){ console.log("当前页参数传入错误=="+currentPage); } //如果当前页大于总页数 则设置当前页=总页数 if (currentPage == pageCount) { currentPage = pageCount; } var htlStr = []; htlStr.push('<ul class="pagination">'); //小于最大显示页数 直接循环 htlStr.push('<li class="prev"><a href="javascript:clickPage(' + (currentPage - 1 > 1 ? currentPage - 1 : 1) + ');">上一页</a></li>'); if (pageCount < maxPageCount + 1) { for (var i = 1; i < pageCount + 1; i++) { if (i == currentPage) { htlStr.push('<li class="page active" ><a href="javascript:;" >' + (i) + '</a></li>'); } else { htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>'); } } htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < pageCount ? currentPage + 1 : pageCount) + ')" >下一页</a></li>'); } else { /** * 当前页-5 当前页+4 */ var begin = 0; var end = 0; if (currentPage - 5 > 0) { /** * 限制每次最多展示10页 算法 展示不同的页数算法也不一样 */ begin = currentPage - 5; end = parseInt(currentPage + 4); if (currentPage >= pageCount - 3) { begin = pageCount - maxPageCount + 1; end = pageCount; } for (var i = begin; i < (parseInt(end) + 1); i++) { if (i == currentPage) { htlStr.push('<li class="page active" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>'); } else { htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>'); } } htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < end ? currentPage + 1 : end) + ')" >下一页</a></li>'); } else { for (var i = 1; i < maxPageCount + 1; i++) { if (i == currentPage) { htlStr.push('<li class="page active" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>'); } else { htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>'); } } htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < pageCount ? currentPage + 1 : pageCount) + ')" >下一页</a></li>'); } } htlStr.push('</ul>'); $('#' + pgDivName).html(htlStr.join('')); } }