数据库中的信息在前台的分页显示.
为什么要进行要分页？是为了在前台页面中不采用滚动条的形式看起来更加的美观.同时如果不采用分页的形式，如果数据量较大的话，浏览器的请求会特别的耗费时间，可能会导致浏览器崩溃。
项目目录结构如下图所示：
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文件，下面的分页字体将被转换为中文。
中文分页结果图。如下
一晚上又这样过去了，写点东西总是不错的。