使用bootstraptable将后台数据展示

达到目的：使用bootstraptable技术将后台数据库中的数据展示在前端

html

<table id="table"></table>

js

<script type="text/javascript">
    $(function(){
        $('#table').bootstrapTable({
            url: '/allmessage',          //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
            method: "post",
            striped: false,                 //是否显示行间隔色
            pagination: true,               //分页
            cache: false,
            uniqueId: "id",               //每一行的唯一标识，一般为主键列
            height:250,
            //queryParams: {uuid:uuid}, //查询参数
            columns: [
                { title: '序号',field:'id', width: 50, align: "center",  formatter:function(value, row, index){
                        return value;
                    }  },
                { title: '分支机构名称',field:'name',width:200},
                { title: '地址',field:'address',width:280},
                { title: '具体业务',field:'business',width:190},
                { title: '员工层级',field:'level', width:100},
                { title: '员工数量',field:"total", width:100},
                { title: '营业状态',field:"do_business",width:100}
            ],
            responseHandler : function(res) { //回调
            return res.rows;
            }
        });
    })
</script>

后端

//因为传入和传出的为json，所以此处必须用RestController（巨坑）
@RestController
public class Show {

    @Autowired
    private RoleService roleService;

    @RequestMapping("/allmessage")
    public JSONObject showsomething()
    {
        JSONObject js = new JSONObject();
        List<Mes> allmsg = roleService.Show();
        js.put("rows",allmsg);
        js.put("total",allmsg.size());
        return js;
    }
}