Springboot+easyui實現資料庫前臺資訊分頁顯示
阿新 • • 發佈：2018-12-23
資料庫中的資訊在前臺的分頁顯示.
為什麼要進行要分頁？是為了在前臺頁面中不採用滾動條的形式看起來更加的美觀.同時如果不採用分頁的形式，如果資料量較大的話，瀏覽器的請求會特別的耗費時間，可能會導致瀏覽器崩潰。
專案目錄結構如下圖所示：
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 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-1)*pageSzie+1;
int total=commonservice.gettstunumber();
List<Stu> stuinforlist=commonservice.stuinfo(startRecord,pageSzie);
Map resultMap=new HashMap();
resultMap.put("total",total-1);
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檔案，下面的分頁字型將被轉換為中文。
中文分頁結果圖。如下
一晚上又這樣過去了，寫點東西總是不錯的。