layui中table 数据表格+pageHelper使用springboot实现

最新推荐文章于 2024-04-01 18:02:53 发布

清宵尚温。

最新推荐文章于 2024-04-01 18:02:53 发布

阅读量932

点赞数 1

分类专栏： notes

本文链接：https://blog.csdn.net/Dreamboy_w/article/details/103478644

版权

notes 专栏收录该内容

79 篇文章 1 订阅

订阅专栏

https://www.layui.com/doc/modules/table.html

官网中介绍了layui中table 数据表格数据如何显示，其中后台的查询方法没有给出，我将所有内容列出来供大家学习。

在pom.xml中添加最新的PageHelper插件

<!--pagehelper-->
<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper-spring-boot-starter</artifactId>
	<version>1.2.3</version>
</dependency>

前端页面

注意url是后台请求路径

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>苗木管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<table class="layui-hide" id="test"></table>
              
          
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
 
<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test' //table的id
    ,url:'/saplings/queryforall' //数据接口
    ,page: true //开启分页
    ,cols: [[
      {type:'checkbox'}
      ,{field:'id', width:80, title: 'ID', sort: true}
      ,{field:'saplingsId', width:110, title: '苗木编号', sort: true}
      ,{field:'saplingsName', width:110, title: '苗木名称'}
      ,{field:'age', width:110, title: '株龄', sort: true}
      ,{field:'baseName', minWidth:110, title: '基地名称'}
      ,{field:'fieldsName', minWidth:110, title: '地块名称'}
      ,{field:'coordinate', title: '坐标', minWidth: 110}
    ]]
  });
});
</script>

</body>
</html>

controller层

layerui前台会穿两个参数，page和limit
pagehelper插件进行分页，分页后的数据会显示出来
查询总数和分页数据写入数据表格
按照layerui的table数据表格的要求，构建一个json字符串

/**
 * 草木管理
 * @author wuhao
 *
 */
@Controller
@RequestMapping("/saplings")
public class SaplingsController {
	
	@Autowired
	private SaplingsService saplingsService;
	
	@ResponseBody
	@RequestMapping("/queryforall")
	public String queryforall(@RequestParam("page")int pageNum,@RequestParam("limit")int pageSize){
		
		PageHelper.startPage(pageNum, pageSize);
		
		List<Saplings> saplingslist= saplingsService.queryAll();
		int count = saplingsService.count();
		
		JSONObject jsonObject = new JSONObject();
		
		jsonObject.put("code", 0);
		jsonObject.put("msg", "");
		jsonObject.put("count", count);
		jsonObject.put("data", saplingslist);
		
		return jsonObject.toJSONString();
	}
}

service层

增加查询总数和查询所有的方法

/**|
 * 草木的service接口层
 * @author wuhao
 *
 */
public interface SaplingsService {

	public List<Saplings> queryAll();
	
	public Saplings queryById(int id);

	public int deleteById(int id);

	public int insert(Saplings saplings);

	public int updateById(Saplings saplings);
	
	public int count();
}

serviceImpl层

实现接口功能

/**
 * 草木service接口的实现
 * @author wuhao
 *
 */

@Service
public class SaplingsServiceImpl implements SaplingsService{

	@Autowired
	private SaplingsMapper saplingsMapper;
	
	@Override
	public List<Saplings> queryAll() {
		return saplingsMapper.queryAll();
	}
	
	@Override
	public Saplings queryById(int id) {
		return saplingsMapper.queryById(id);
	}

	@Override
	public int deleteById(int id) {
		return saplingsMapper.deleteById(id);
	}

	@Override
	public int insert(Saplings saplings) {
		return saplingsMapper.insert(saplings);
	}

	@Override
	public int updateById(Saplings saplings) {
		return saplingsMapper.updateById(saplings);
	}

	@Override
	public int count() {
		return saplingsMapper.count();
	}
}

mapper层

用mybatis的注解方式写查询语句，xml就不用再写了

/**
 * dao或者mapper层，数据库访问层
 * @author wuhao
 *
 */
public interface SaplingsMapper {
	
	@Results({
		@Result(column = "id", property = "id"), 
		@Result(column = "saplingsId", property = "saplingsId"),
		@Result(column = "saplingsName", property = "saplingsName"), 
		@Result(column = "age", property = "age"), 
		@Result(column = "baseName", property = "baseName"),
		@Result(column = "fieldsName", property = "fieldsName"),
		@Result(column = "coordinate", property = "coordinate"),
	})
	
	
	@Select("select * from saplings")
	public List<Saplings> queryAll();
	
	@Select("select * from saplings where id=#{id}")
	public Saplings queryById(int id);

	@Update("delete from sapings where id= #{id}")
	public int deleteById(int id);

	@Insert("insert into saplings values(null,#{saplingsId},#{saplingsName},#{age},#{baseName},#{fieldsName},#{coordinate})")
	public int insert(Saplings saplings);

	@Update("update saplings set saplingsId=#{saplingsId},saplingsName=#{saplingsName},age=#{age},baseName=#{baseName},fieldsName=#{fieldsName},coordinate=#{coordinate} where id=#{id}")
	public int updateById(Saplings saplings);
	
	@Select("select count(1) from saplings")
	public int count();
	
	
}