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

怼烎@ 2023-06-20 14:55 10阅读 0赞

[https://www.layui.com/doc/modules/table.html][https_www.layui.com_doc_modules_table.html]

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

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

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

1.  前端页面

注意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">
      
    </head>
    <body>
     
    <table class="layui-hide" id="test"></table>
                  
              
    <script src="layui/layui.js" charset="utf-8"></script>
     
     
    <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>

1.  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();
    	}
    }

1.  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();
    }

1.  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();
    	}
    }

1.  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();
    	
    	
    }

[https_www.layui.com_doc_modules_table.html]: https://www.layui.com/doc/modules/table.html