Boostrap-Table插件能使我们的分页查询数据不必重定向页面,因为重定向需要重新加载整个页面的资源对于一些复杂的页面响应时间是很长的,我们如果只关注表格中的数据改动

如果项目中是使用Bootstrap Table来做数据展示的,所以我们要了解数据如何展示，我们需要先来了解Bootstrap Table是如何使用的.
Bootstrap Table参考文档

列表展示

添加Bootstrap Table相关的CSS和JS文件

把thymeleaf循环生成表格的代码删除，添加如下html代码

添加js代码把table标签渲染成组件，默认分页给后台传递的是offset(需要查询从这个起始索引开始)和limit这两个参数

$('#table').bootstrapTable({url: '/permission/listData',//请求路径method: 'GET',   //数据请求方式sidePagination:'server',//服务端分页pagination:true,//开启分页uniqueId:"id",columns: [{//表格中有哪些列field: 'id',title: '编号'}, {field: 'name',title: '权限名称'}, {field: 'expression',title: '权限表达式'}}]});

后台需要提供一个方法接受上面请求的2个参数并查询返回组件所需要的数据,对返回的数据格式有要求，json数据,需要如下格式

{"total":8,"rows":[{"id":1,"name":"xx权限","expression":"xx权限表达式"},{"id":2,"name":"xx权限","expression":"xx权限表达式"},{"id":3,"name":"xx权限","expression":"xx权限表达式"}]}

所以我们需要提供一个类,把数据封装成如下格式

@Setter
@Getter
@NoArgsConstructor
@AllArgsConstructor
public class TableDataInfo {/** 总记录数 */private long total;/** 列表数据 */private List rows;
}

后台控制器方法需要返回JSON格式数据

@RequestMapping("/list")
public String list() {return "permission/list";
}@RequestMapping("/listData")
@ResponseBody
public TableDataInfo listData(QueryObject qo)
{PageHelper.offsetPage(qo.getOffset(),qo.getLimit());//设置分页起始索引,查询多少条数据PageInfo pageInfo = permissionService.query(qo);//查询出分页数据return new TableDataInfo(pageInfo.getTotal(),pageInfo.getList());//封装数据并返回
}

高级查询

在页面中增加输入框和查询按钮

关键字:
 查询

增加搜索的点击事件处理

function searchOp(){//点击查询时,刷新表格数据$('#table').bootstrapTable('refresh');
}

在上面bootstrapTable()方法中添加查询参数这个属性

queryParams:function(params) {//找到name为key的标签将值给它,它将会在请求时带上这个参数params.key=$("[name=key]").val();return params;
},