1、 分页的样式:jsp页面导入
<!-- Bootstrap-->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
2、此插件自己写入,控制页面调转功能(指定跳转页面、每页显示多少条记录的事件)
<!-- 自定义分页的JS插件 -->
<script type="text/javascript" src="js/pagination.js"></script>
3、pagination.js插件实现函数
/**
* DevelopTime:2016/10/31
* ZZU·WangChengJian
* MyBatis分页插件
* 使用注意:
* 1.引入pagination.js,和分页JSP代码
* 2.控制层把PageInfo传到前台页面
*/
$(function(){
$(":button[id!='cpBtn'][id!='lsBtn'][id!='searchBtn']").click(function(){
var currentPage=$(this).val() ;
//这里可以选择是否接收,因为你不一定使用搜索框,看不懂就不需要改写一样可以分页
var keyWord=$("#keyWordInput").val() ;
$("#currentPage").val(currentPage);
$("#keyWord").val(keyWord); //同上
$("#spForm").submit() ;
});
$("#cpMenu a").click(function(){
var currentPage=$(this).text() ;
var keyWord=$("#keyWordInput").val() ;
$("#currentPage").val(currentPage);
$("#keyWord").val(keyWord);
$("#spForm").submit() ;
});
$("#lsMenu a").click(function(){
var lineSize=$(this).text() ;
var keyWord=$("#keyWordInput").val();
$("#lineSize").val(lineSize);
$("#keyWord").val(keyWord);
$("#spForm").submit() ;
});
$("#searchBtn").click(function(){
var keyWord=$("#keyWordInput").val() ;
$("#keyWord").val(keyWord);
$("#spForm").submit() ;
return false ;
});
});
4、分页技术
<form action="Controller指向" method="POST" name="spForm" id="spForm">
<input type="hidden" id="currentPage" name="pageNum" value="${pageInfo.pageNum}">
<input type="hidden" id="lineSize" name="pageSize" value="${pageInfo.pageSize}">
<input type="hidden" name="start" value="${start}"/>
<input type="hidden" name="end" value="${end}"/>
<input type="hidden" name="oid" value="${oid}"/>
<input type="hidden" name="courseName" value="${courseName}"/>
<button type="button" class="btn btn-primary" value="${pageInfo.firstPage}"
${pageInfo.pageNum==1?"disabled='disabled'":""}>首页</button>
<button type="button" class="btn btn-success" value="${pageInfo.prePage}"
${pageInfo.prePage==0?"disabled='disabled'":""}>上一页</button>
跳转到第 <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="cpBtn">${pageInfo.pageNum} <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" id="cpMenu">
<c:forEach begin="1" end="${pageInfo.pages}" var="page">
<li><a href="#">${page}</a></li>
</c:forEach>
</ul>
</div> 页
每页显示 <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="lsBtn">${pageInfo.pageSize} <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" id="lsMenu">
<c:forEach items="${lineSizes}" var="lineSize">
<li><a href="#">${lineSize}</a></li>
</c:forEach>
</ul>
</div> 条
<button type="button" class="btn btn-info" value="${pageInfo.nextPage}"
${pageInfo.nextPage==0?"disabled='disabled'":""}>下一页</button>
<button type="button" class="btn btn-danger"value="${pageInfo.lastPage}"
${pageInfo.pageNum==pageInfo.lastPage?"disabled='disabled'":""}>尾页</button>
共 ${pageInfo.size}/${pageInfo.total} 条</form>
5、Controller层的操作
public String showCourseList(String start, String end, Integer oid, String courseName,
@RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
@RequestParam(value = "pageSize", defaultValue = "5") int pageSize, Model model, HttpSession session) {
List<CourseType> courseTypeList = contentManagerService.courseTypeList();
model.addAttribute("courseTypeList", courseTypeList);
PageInfo pageInfo = contentManagerService.courseList(pageNum, pageSize, start, end, oid, courseName);
// System.out.println("==========="+pageInfo);
model.addAttribute("pageInfo", pageInfo);
//一页显示多少条数据
String[] lineSizes={"5","10"};
// 数据回显
model.addAttribute("start", start);
model.addAttribute("end", end);
model.addAttribute("oid", oid);
model.addAttribute("courseName", courseName);
model.addAttribute("lineSizes", lineSizes);
return "content";
}
6、最重要的还要导入分页插件(pom.xml–>mvn项目插件自行导入)
<!--分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.0</version>
</dependency>