做公司 网站建设价格低semantic ui

---

前言

新手小白今日学习了一个新技能，那就是将网页的内容按需要分页，特来此总结一下~

---

一、分页思想？

一般网页上的分页都是：首页>上一页>下一页>尾页，所以我们可以先定义几个数据对象

total：总数量  

page：页码

totalpage：总页码

list：数据

二、具体操作

2.1分页语句

SELECT * FROM zhandian LIMIT ?, ?

?---限制多少---(page-1)*size

?---size

mybatis不允许直接传递2个参数

把limit和size保存到map中

<select id="selectByPage" resultType="zhandian" parameterType="map">select * from zhandian limit #{limit},#{size}</select>

2.2属性文件设置每页行数

jdbc.size=5

2.3业务类实现分页功能

//获取属性信息
@Value("${jdbc.size}")
private int size;

public List selectByPage(int page) {// TODO Auto-generated method stubMap param = new HashMap();param.put("limit", (page-1)*size);param.put("size", size);return zdao.selectByPage(param);}

2.4控制器实现分页

请求参数---int page---需要访问的页码

回传---总数量total、页码page、总页码totalpage、数据list

/*** 分页查询* @param page 访问的页码* @return 数据展示页*/	@RequestMapping("/selectByPage")  	public String selectByPage(int page) {//总数量total、页码page、总页码totalpage、数据listint total = zs.selectCount();//获取sizeint size = zs.getSize();//int totalpage = (total%size==0)?total/size : total/size+1;int totalpage = (total+size-1)/size;List list = zs.selectByPage(page);request.setAttribute("total", total);request.setAttribute("page", page);request.setAttribute("totalpage", totalpage);request.setAttribute("list", list);return "zhandian/list";}

2.5页面实现分页脚本

<!-- 分页工具条 -->
<div class="row"><div class="col-sm-4"><div id="pagerInfo">共${total }条数据，${page }/${totalpage }页</div></div><div class="col-sm-8"><nav id="pagerNav"><ul class="pagination pagination-sm pull-right"><li><a href="javascript:next(1);" id="firstBtn">首页</a></li>		<li><a href="javascript:next(${page-1 });" id="prevBtn">上页</a></li> 		        		<li><a href="javascript:next(${page+1 });" id="nextBtn">下页</a></li>               <li><a href="javascript:next(${totalpage });" id="lastBtn">末页</a></li></ul></nav></div>
</div>

js脚本

<script type="text/javascript">function next(page) {location = 'zhandian/selectByPage?page='+page;}
</script>

还可以在首页和尾页做一个验证，使程序更加完善

function next(page) {if('${page}'==1 && page<=1){layer.msg("当前已经是第一页");}else if('${page}'=='${totalpage}'&& page>='${totalpage}'){layer.msg("当前已经是最后一页");}else{location='zhandian/selectByPage?page='+page;}}

最后记录一下项目视图和效果图

  

---

 

总结

以上就是有关分页查询的总结啦，等到下次忘记了就来这里看看吧