您的位置：首页 > 编程语言 > Java开发

Springboot+easyui实现数据库前台信息分页显示

2017-12-14 22:31 609 查看

数据库中的信息在前台的分页显示.

为什么要进行要分页？是为了在前台页面中不采用滚动条的形式看起来更加的美观.同时如果不采用分页的形式，如果数据量较大的话，浏览器的请求会特别的耗费时间，可能会导致浏览器崩溃。

项目目录结构如下图所示：

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(St
ea8a
ring 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-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文件，下面的分页字体将被转换为中文。

中文分页结果图。如下

一晚上又这样过去了，写点东西总是不错的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航