故事背景：2018年10月14日因梦中惊醒写下一篇springboot+layui-table分页小demo入门级别案例，怎料一写不可收拾，故写下这篇分页demo提升版
案例展示：
在上个版本基础上加了一个模糊搜索功能，即模糊搜索分页功能的实现：
注意：和上个版本相比就是多了一个参数而已，其他变化不太大，相信你一看就明白是咋地回事
首先：请引入jquery和一套layui
前台代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body>
<div style="margin-top: 17px;margin-left: 1103px;">
<span>班级搜索：</span><input type="text" style="height: 27px;width: 220px;" id="sear1" placeholder="请输入班级进行模糊查询"/>
</div>
<div class="layui-card-body">
<table class="layui-hide" id="test"></table>
</div>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/layui/layui.js"></script>
<script>
layui.use('table', function(){
var kw='';
addData(kw);
});
function addData(kwx){
var table = layui.table;
table.render({
elem: '#test'
,url:'../../showData?keyWord='+kwx
,limit:11 //默认为10
,cols: [[
{field:'id', width:170, title: '编号', sort: true} //sort：true页面可进行排序操作
,{field:'className', width:170, title: '班级名称'}
,{field:'classSumNum', width:120, title: '班级人数', sort: true}
,{field:'teacherName', width:130, title: '老师名字'}
,{field:'fdyName',width:160, title: '辅导员名字'}
,{field:'loanSumNum', width:130, title: '贷款人数', sort: true}
,{field:'classZhiBiao', width:130, title: '班级指标', sort: true}
,{field:'fdyNum', width:130, title: '辅导员编号'}
,{field:'college', width:220, title: '学院', sort: true}
]]
,page: true
,done:function(res, curr, count){
//数据的回调用，可不写
}
});
}
$("#sear1").keyup(function(event){
if(event.keyCode ==13){
var keyWord=$("#sear1").val();
addData(keyWord);
}
});
</script>
</body>
</html>controller代码：
@Controller
public class DataShow {
@Autowired
private DataShowService dataShowService;
@ResponseBody
@RequestMapping("/showData")
public Map<String,Object> methodx(
@RequestParam(required=false,defaultValue="1") int page,
@RequestParam(required=false,defaultValue="15") int limit,
String keyWord
){
List<ClassTable> datas=dataShowService.queryAllDataFromTable(page,limit,keyWord);
int countx= dataShowService.queryAllCount(keyWord);
Map<String,Object> map=new HashMap<String,Object>();
map.put("code",0);
map.put("msg","");
map.put("count",countx);
map.put("data",datas);
System.out.println(map.toString());
return map;
}
}service代码：
public interface DataShowService {
List<ClassTable> queryAllDataFromTable(int page, int limit, String keyWord);
int queryAllCount(String keyWord);
}
serviceImpl代码：
@Service
public class DataShowServiceImpl implements DataShowService {
@Autowired
private DataShowServiceMapper dataShowServiceMapper;
@Override
public List<ClassTable> queryAllDataFromTable(int page, int limit, String keyWord) {
page=(page-1)*limit;
return dataShowServiceMapper.queryAllDataFromTable(page,limit,keyWord);
}
@Override
public int queryAllCount(String keyWord) {
return dataShowServiceMapper.queryAllCount(keyWord);
}
}
dao代码：
public interface DataShowServiceMapper {
List<ClassTable> queryAllDataFromTable(@Param("page") int page, @Param("limit") int limit, @Param("keyWord") String keyWord);
int queryAllCount(String keyWord);
}
mapper.xml代码：
<mapper namespace="com.ansheng.dao.DataShowServiceMapper">
<select id="queryAllDataFromTable" resultType="com.ansheng.entity.ClassTable">
select * from classtable
<if test='keyWord!="" or keyWord!=null'>
where className LIKE '%${keyWord}%'
</if>
limit #{page},#{limit}
</select>
<select id="queryAllCount" resultType="java.lang.Integer" parameterType="java.lang.String">
select count(*) from classtable
<if test='_parameter != "" and _parameter != null'>
where className LIKE '%${_parameter}%'
</if>
</select>
</mapper>感兴趣的小伙伴可以扫码关注下公众号哦，公众号会分享高质量的技术文章哦
