springboot+layui-table分页前后台demo1(提升版)

故事背景：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>

springboot+layui-table分页前后台demo1(提升版)

猜你喜欢