bootstrap-table的使用（springboot+mybatis开发环）

最新推荐文章于 2024-03-26 22:59:33 发布

Huan_能欢

最新推荐文章于 2024-03-26 22:59:33 发布

阅读量2.4k

点赞数 3

文章标签： bootstrap bootstrap-table springboot mybatis

本文链接：https://blog.csdn.net/qq_28582847/article/details/79961270

版权

如需要Demo的朋友：点击打开链接

准备工作：

1.需要一个spingboot+mybatis环境，搭建步骤：点击打开链接，项目结构如下

2.控制器Controller关键代码

 @ResponseBody
    @RequestMapping("/getPage")
    public Map<String,Object> getPage(@RequestParam(value = "limit", required = true) Integer limit,
                                      @RequestParam(value = "offset", required = true) Integer offset){
        return userService.getPage(limit,offset);
    }

解析：其中limit,offset是bootstrap-table默认传到后台。offset为开始条，limit为条数

3.实现类Service关键代码

public Map<String,Object> getPage(Integer limit,Integer offset){
        Map<String,Object> resultMap = new HashMap();
        List<User> userList = null;
        Integer total = 0;
        try {
            userList = userMapper.getpage(offset,limit);
            total = userMapper.findAllCount();
        }catch (Exception e){
            e.printStackTrace();
        }
        resultMap.put("data",userList);
        resultMap.put("total",total);
        return resultMap;
    }

4.接口层Mapper关键代码

@Mapper
public interface UserMapper {

    List<User> getpage(@Param("stratRow") Integer stratRow, @Param("endRow") Integer endRow);

    Integer findAllCount();

}

5.映射mapper.xml关键代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.demo.mapper.UserMapper">
    <resultMap id="BaseResultMap" type="com.example.demo.model.User">
        <result column="ID" property="id"/>
        <result column="NAME" property="name"/>
        <result column="SEX" property="sex"/>
        <result column="AGE" property="age"/>
        <result column="JOB" property="job"/>
    </resultMap>

    <select id="getpage" resultMap="BaseResultMap">
        select * from user LIMIT #{stratRow},#{endRow}
    </select>

    <select id="findAllCount" resultType="java.lang.Integer">
        select count(*) from user
    </select>
</mapper>

6.前端页面关键代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap-table使用</title>
    <link rel="stylesheet" type="text/css" href="/bootstrap-table/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/bootstrap-table/bootstrap-table.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<table id="tb_departments"></table>
</body>
<script type="text/javascript">
    $(function(){
       var oTable = TableInit();
       oTable.Init();
    });

    function TableInit() {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function() {
            $('#tb_departments').bootstrapTable({
                url: "/test/getPage",
                pagination: true, //分页
                search: false, //显示搜索框
                sidePagination: "server", //服务端处理分页
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 5,                       //每页的记录行数（*）
                responseHandler:function(res) {
                    return {
                        "total":res.total,//总页数
                        "rows": res.data //数据
                    }
                },
                columns: [
                    {
                        title: '序号',//标题  可不加
                        width:'64px',
                        align: 'center',
                        valign: 'middle',
                        formatter: function (value, row, index) {
                            return index+1;
                        }
                    },
                    {
                        title: '姓名',
                        field: 'name',
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        title: '性别',
                        field: 'sex',
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        title: '年龄',
                        field: 'age',
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        title: '工作',
                        field: 'job',
                        align: 'center',
                        valign: 'middle',
                    }
                ]
            });
        };
        return oTableInit;
    };


    function selBycondition(){
        var url = "/test/getPage?name=aaa";
        $("#tb_departments").bootstrapTable('refresh',{'url':url});
    }

</script>
</html>

解析：

responseHandler:function(res) {
    return {
        "total":res.total,//总页数
        "rows": res.data //数据
    }
}

其中：total和data为后台controller返回的数据和总条数；最后selBycondtion方法为条件查询时，可以通过该方法重新加载表格。

Huan_能欢

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
bootstrap-table的使用（springboot+mybatis开发环）

如需要Demo的朋友：点击打开链接准备工作：1.需要一个spingboot+mybatis环境，搭建步骤：点击打开链接，项目结构如下2.控制器Controller关键代码 @ResponseBody @RequestMapping("/getPage") public Map&lt;String,Object&gt; getPage(@RequestParam(value = "l...
复制链接

扫一扫