資料庫中的資訊在前台的分頁顯示.
為什麼要進行要分頁？是為了在前台頁面中不采用滾動條的形式看起來更加的美觀.同時如果不采用分頁的形式，如果資料量較大的話，浏覽器的請求會特别的耗費時間，可能會導緻浏覽器崩潰。
項目目錄結構如下圖所示：
1 資料庫資訊的存儲
1.1 建立一個實體類，用來存儲該表中的所有使用者資訊。
該實體類中的屬性名和資料庫中的表中的屬性名一樣，通過泛型存儲該表中的所有使用者資訊
資料庫中的資訊如下圖所示：
是以我們建立的資料庫應該包含上述表中的所有屬性資訊。
1.2 sql語句的limit使用。
不加limit限制是無法進行分頁展示資訊的
select * from stu LIMIT 10;—————檢索前10行資料，顯示1-10條資料
select * from stu LIMIT 1,10;—————檢索從第2行開始，累加10條id記錄，共顯示id為2….11
注意：limit中的起始值是0，limit 0表示資料庫中的第一條資訊
2 代碼實作
2.1 實體類代碼
代碼如下所示：
package test.entity;
public class Stu {
public String sno;
public String sname;
public String password;
public String tno;
public String tname;
public String tgrade;
public Stu (String sno,String sname,String password,String tno,String tname,String tgrade){
this.sname=sname;
this.password=password;
this.tno=tno;
this.tname=tname;
this.tgrade=tgrade;
}
public String getSno() {
return sno;
}
public void setSno(String sno) {
this.sno = sno;
}
public String getSname() {
return sname;
}
public void setSname(String sname) {
this.sname = sname;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getTno() {
return tno;
}
public void setTno(String tno) {
this.tno = tno;
}
public String getTname() {
return tname;
}
public void setTname(String tname) {
this.tname = tname;
}
public String getTgrade() {
return tgrade;
}
public void setTgrade(String tgrade) {
this.tgrade = tgrade;
}
@Override
public String toString() {
return sno + " " + sname + " " +password + " " +tno + " " +tname + " " +tgrade;
}
}
2.2 mapper代碼
package test.mapper;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Component;
import test.entity.Stu;
import java.util.List;
@Component
public interface Common {
@Select("select count(*) from stu")
public int gettstunumber( );
@Select("select * from stu limit #{startRecord},#{pageSize}")
public List<Stu> stuinfo(@Param("startRecord")int startRecord,@Param("pageSize")int pageSize);
}
2.3 service代碼
package test.service;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import test.entity.Stu;
import test.mapper.Common;
import java.util.List;
@Service
public class CommonService {
@Autowired
public Common commonmapper;
public int gettstunumber( ){
return commonmapper.gettstunumber();
}
public List<Stu> stuinfo(int startRecord,int pageSize){
return commonmapper.stuinfo(startRecord, pageSize);
}
}
2.4 controller代碼
/*
使用者資訊清單
*/
@GetMapping(value = "/stuinforlist")
@ResponseBody
public Map getStuinforList(HttpServletRequest request){
int page=Integer.parseInt(request.getParameter("page"));
int pageSzie=Integer.parseInt(request.getParameter("rows"));//pageSzie
int startRecord=(page-)*pageSzie+;
int total=commonservice.gettstunumber();
List<Stu> stuinforlist=commonservice.stuinfo(startRecord,pageSzie);
Map resultMap=new HashMap();
resultMap.put("total",total-);
resultMap.put("rows",stuinforlist);
return resultMap;
}
@GetMapping是一個組合注解，是@RequestMapping(method = RequestMethod.GET)的縮寫。該注解将HTTP Get 映射到 特定的處理方法上。
上述代碼等價于
@RequestMapping(value = “/stuinforlist”, method = {RequestMethod.GET})
2.5 html頁面代碼
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="easyui/demo/demo.css"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<body>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north'" style="width: 100%;height: 9%"></div>
<div data-options="region:'center',title:'使用者資訊',">
<table id="ttd1" class="easyui-datagrid"
data-options="url:'/stuinforlist',
method:'get',
border:false,
singleSelect:true,
pagination:true,
fit:true,
pageSize:25,
pageList:[25,15,10],
fitColumns:true">
<thead>
<tr>
<th data-options="field:'sno',align:'center',width:'9%'">工号</th>
<th data-options="field:'sname',align:'center',width:'9%'">姓名</th>
<th data-options="field:'password',align:'center',width:'9%'">密碼</th>
<th data-options="field:'tno',align:'center',width:'11%'">課程号</th>
<th data-options="field:'tname',align:'center',width:'9%'">課程名</th>
<th data-options="field:'tgrade',align:'center',width:'9%'">成績</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
該頁面使用了easyui架構中的datagrid。其中URL指使用者請求到的資料映射。
尤其要注意的是：data-options=”field:’sno’,align:’center’,width:’9%’” field屬性中，後面跟的屬性名，必須是資料庫中的某個屬性，否則将無法顯示某列屬性資訊。pageSize的值必須在pageList中存在。pageSize指一頁顯示的資料記錄數。pagination屬性要設定為true，開啟分頁功能。
3 頁面效果展示圖
一頁顯示10條資料
一頁顯示25條資料
如果我們引入下面的js檔案，下面的分頁字型将被轉換為中文。
中文分頁結果圖。如下
一晚上又這樣過去了，寫點東西總是不錯的。