文章目录

• 前言
• 一、分页思想？
• 二、使用步骤
• 总结

---

前言

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

---

一、分页思想？

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

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 stub
		Map 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、数据list
		int total = zs.selectCount();
		//获取size
		int 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;
			}
		}

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

  

---

 

总结

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