ssm整合bootstrap之分頁
先看效果圖:
一：建立數據庫student:
學生表student
年級表grade：
二：創建web項目：myStudent搭建起ssm框架:
三：將分頁插件pageHelper jar包拷貝到lib文件夾下
四：在mybatis配置文件sqlMapConfig.xml中配置分頁插件：
<plugins>
<plugin interceptor="com.github.pagehelper.PageHelper"
<!-- 設置數據庫類型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六種數據庫-->
<property name="dialect" value="mysql"/>
</plugin>
</plugins>
@Controller
public class studentCont
五：編寫控制器的方法：
@Controller
public class studentController {
@Autowired
private studentService StudentService;
@RequestMapping("/Index")
public String Index(@RequestParam(value="pn",defaultValue="1") int pn,Model model)
{
// 在查詢之前需要調用，傳入當前第幾頁，以及每頁多少條記錄
PageHelper.startPage(pn,3);
List<student> lstStudent =
// 使用pageInfo包裝查詢後的結果，只需要將pageInfo交給頁面就行了。
// 封裝了詳細的分頁信息,包括有我們查詢出來的數據，傳入連續顯示的頁數
PageInfo<student> page = new PageInfo<student>(lstStudent,3);
model.addAttribute("pageInfo", page);
return "Index"; }
}
這裏的參數pn表示當前第幾頁，默認值defaultValue為1
PageHelper.startPage(pn,3);這行代碼在分頁查詢之前調用第一個參數pn表示當前第幾頁，第二個參數3表示每頁顯示3條記錄
PageInfo<student> page = new PageInfo<student>(lstStudent,3);
這行代碼將查詢出的所有學生記錄封裝到PageInfo中,第一個參數表示查詢出的所有學生，第二個參數表示連續顯示的頁碼數。
將page傳到頁面。
六：編寫jsp頁面
（1） 引入bootstrap文件
<head>
<%pageContext.setAttribute("App_PATH", request.getContextPath()); %>
<link
href="${App_PATH}/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<script type="text/javascript" src="${App_PATH}/staitc/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src ="${App_PATH }/staitc/js/bootstrap.min.js"></script>
</head>
(2) 使用bootstrap搭建布局：
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>ssm-crud</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" >新增</button>
<button class="btn btn-danger">刪除</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>姓名</th>
<th>年齡</th>
<th>年級</th>
<th>操作</th>
</tr>
<c:forEach items="${pageInfo.list }" var="stu">
<tr>
<th>${stu.sid }</th>
<th>${stu.sname }</th>
<th>${stu.age }</th>
<th>${stu.grade.gname }</th>
<th>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil"></span>編輯
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash"></span>刪除
</button>
</th>
</tr>
</c:forEach>
</table>
</div>
（3）顯示分頁信息和分頁導航：
<div class="row">
<div class="col-md-6">當前${pageInfo.pageNum }頁,總${pageInfo.pages }頁，總${pageInfo.total }條記錄</div>
<div class="col-md-6">
<ul class="pagination">
<li><a href="${App_PATH}/Index?pn=1">首頁</a></li>
<!--如果有前一頁則加上前一頁的超鏈接 -->
<c:if test="${pageInfo.hasPreviousPage }">
<li><a href="${APP_PATH }/Index?pn=${pageInfo.pageNum-1}"
aria-label="Previous"> <span aria-hidden="true">«</span>
</a></li>
</c:if>
<!--循環遍歷所有頁碼並顯示 -->
<c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
<c:if test="${page_Num==pageInfo.pageNum }">
<li class="active"><a href="#">${page_Num}</a></li>
</c:if>
<c:if test="${page_Num!=pageInfo.pageNum }">
<li><a href="${App_PATH}/Index?pn=${page_Num}">${page_Num}</a></li>
</c:if>
</c:forEach>
<!--如果有下一頁則顯示下一頁的超級鏈接 -->
<c:if test="${pageInfo.hasNextPage }">
<li><a href="${App_PATH}/Index?pn=${pageInfo.pageNum+1}" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</c:if>
<li><a href="${App_PATH}/Index?pn=${pageInfo.pages}">末頁</a></li>
</ul>
</div>
</div>
</div>
如果需要源代碼請加微信 350293616 領取
ssm整合bootstrap之分頁