????????之前一直觉得分页很难，然后每次做实验的时候就把分页功能给跳过了，但是！！在前几天我终于动手去做分页功能了，感觉难度还能接受~话不多说，进入主题！(小萌新开课，有问题请指出~)
一、编写page类
? ? ? ? 1.做分页功能首先要有Page类，类中有4个变量(属性)：
????????????????数据总数(查数据库，select count(*) from tableName)
? ? ? ? ? ? ? ? 页面大小：每页显示的数据条数
? ? ? ? ? ? ? ? 总页数：分为两种情况：
? ? ? ? ? ? ? ? ? ? ? ? (1)当数据总数可以整除页面大小：
????????????????????????????????总页数 = 数据总数/页面大小
? ? ? ? ? ? ? ? ? ? ? ? (2)当数据总数不能整除页面大小：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 总页数 = 数据总数/页面大小+1
? ? ? ? ? ? ? ? 当前页(页码)：可以从前端拿到
public class Page {
int count = 5; // 每一页的数量
int total; // 总共的数据量
int pageNum; //当前页数
int totalPage; //总页数
/**
* 计算得到总页数
*
* @return
*/
public int getTotalPage() {
// 假设总数是50，是能够被5整除的，那么就有10页
if (0 == total % count)
totalPage = total / count;
// 假设总数是51，不能够被5整除的，那么就有11页
else
totalPage = total / count + 1;
return totalPage;
}
}二、编写dao接口
? ? ? ?getTotalCount方法拿到总数据量是为了计算总页数(详见上面的getTotalPage方法)。?findStuP方法是从数据库查询出当前页需要展示的数据。
/**
* 查询所有的数据量
* @return
*/
@Select("select count(*) from Student")
public int getTotalCount();
/**
* 分页查询
* @param offset 每一页开始的行数(当前页数*limit)(因为mysql是从0开始)
* @param limit 每一页的行数
* @return
*/
@Select("select * from Student limit #{offset},#{limit}")
public List<Student> findStuP(@Param("offset") int offset,@Param("limit") int limit);三、controller层
? ? ? ? 进入第一次该页面显示的数据。并且将page放在request中，为了让前端可以获取当前页数和总页数。
@RequestMapping("findStu")
public String findStuC(HttpServletRequest request) {
//进来先显示第0~4条数据，page的count已经初始化为5，即每一页5条数据
List<Student> list = stuService.findStuP(0, page.getCount());
request.setAttribute("findStu", list);
page.setTotal(stuService.getTotalCount()); //总数据量
page.setTotalPage(page.getTotalPage());
page.setPageNum(0);
request.setAttribute("page", page);
return "index.jsp";
}四、前端页面
<ul class="pagination">
<%--去到首页--%>
<li><%--这里的pageNum是指要去到的页数，MySql是从第0页开始的，所以首页是第0页--%>
<a href="findStuPage?pageNum=0">
<span>?</span>
</a>
</li>
<%--上一页--%>
<%--如果当前为首页，则这个超链接disabled--%>
<li <c:if test="${requestScope.page.pageNum ==0}">class="disabled"</c:if>>
<%--去到上一页，即为当前页数-1--%>
<a href="findStuPage?pageNum=${requestScope.page.pageNum-1}">
<span>?</span>
</a>
</li>
<%--下一页--%>
<%--如果当前为最后一页，则这个超链接disabled--%>
<li <c:if test="${requestScope.page.pageNum == requestScope.page.totalPage-1}">class="disabled"</c:if>>
<%--去到下一页，即为当前页数+1--%>
<a href="findStuPage?pageNum=${requestScope.page.pageNum+1}">
<span>?</span>
</a>
</li>
<%--去到最后一页--%>
<li >
<%--传参pageNum为最后一页--%>
<a href="findStuPage?pageNum=${requestScope.page.totalPage-1}">
<span>?</span>
</a>
</li>
</ul><p/>
</div>
<div class="text-align2">
当前为第${requestScope.page.pageNum+1}页，一共${requestScope.page.totalPage}页,去到第
<select id="pageCode" name="pageNum">
<c:forEach begin="1" end="${requestScope.page.totalPage}" step="1" varStatus="i">
<option value="${i.index}" >${i.index}</option>
</c:forEach>
</select>
页<a href="javascript:_go();"><el-button round size="mini">提交</el-button></a>
<p/>
</div>五、controller层
? ? ? ? 获取前端传来的pageNum，根据页数找到需要显示的五条数据。
@RequestMapping("findStuPage")
public String findStuPageC(HttpServletRequest request) {
String num = request.getParameter("pageNum");
int pageNum = Integer.parseInt(num);
List<Student> list = stuService.findStuP(pageNum * 5, page.getCount());
page.setTotal(stuService.getTotalCount()); //总数据量
page.setTotalPage(page.getTotalPage());
page.setPageNum(pageNum);
request.setAttribute("page", page);
request.setAttribute("findStu", list);
return "index.jsp";
}六、页面效果
?
?
七、小体会。
? ? ? ? 我这个分页做得很简陋，仅供需要的小伙伴进行参考~也希望有问题大家能够指出~?ps：对于一些class大家不用太过于关注~用的是elementui的样式。