Bootstrap Table是一款基于Bootstrap的jQuery表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤、扩展等等的功能。作者地址:https://github.com/wenzhixin/bootstrap-table。
实现
在springboot中使用Bootstrap Table,首先我需要引入一些依赖:
org.springframework.boot
spring-boot-starter-web
mysql
mysql-connector-java
org.mybatis.spring.boot
mybatis-spring-boot-starter
1.3.2
com.github.pagehelper
pagehelper-spring-boot-starter
1.2.5
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-starter-test
test
因为是web项目所以引入spring-boot-starter-web和thymeleaf,需要用到数据库所以引入mysql-connector-java和mybatis-spring-boot-starter,因为要分页所以直接用了Mybatis的一个分页pagehelper.
项目中使用Mybatis的逆向工程自动生成实体和访问数据库的Mapper成代码,所以需要在pom.xml文件中添加:
org.springframework.boot
spring-boot-maven-plugin
org.mybatis.generator
mybatis-generator-maven-plugin
1.3.5
true
true
mysql
mysql-connector-java
5.1.47
然后需要在resources下新建generatorConfig.xml,并复制下面代码:
安装图示操作完成代码的自动生成。
需要说明的是:
,因为我们要使用分页查询的功能,而我又想直接在生成的代码中生成带有能够实现分页功能的函数接口,所以我们需要添加上面的插件代码。`
另外生成的XMapper接口还没有添加注解,一个方法是在每个Mapper接口类上注解@Mapper,还有一种更方便的方法就是在启动类中使用@MapperScan("cn.jiuyue.bootstraptable.mapper")。
@SpringBootApplication
@MapperScan("cn.jiuyue.bootstraptable.mapper")
public class BootstrapTableApplication {
public static void main(String[] args) {
SpringApplication.run(BootstrapTableApplication.class, args);
}
}
在application.yml文件配置的是:
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/db_community?characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
username: root
password: 1111
pagehelper:
auto-dialect: mysql
reasonable: true
support-methods-arguments: true
page-size-zero: true
server:
port: 8088
mybatis:
mapper-locations: classpath:mapper/*.xml
configuration:
map-underscore-to-camel-case: true
type-aliases-package: cn.jiuyue.bootstraptable.model
编写一个简单的页面,因为基于Bootstrap,所以先引入Bootstrap依赖,然后引入Bootstrap Table依赖:
Index
角色:
重置
搜索
完成controller接口:
public class BaseController {
protected MapgetDataTable(PageInfo> pageInfo) {
MaprspData = new HashMap();
rspData.put("rows", pageInfo.getList());
rspData.put("total", pageInfo.getTotal());
return rspData;
}
}
@Controller
public class CommentController extends BaseController{
@Autowired
private CommentService commentService;
@RequestMapping(value = "list",method = RequestMethod.GET)
@ResponseBody
public PageInfolist(Integer page, Integer size){
page = 0;
size = 10;
PageInfolist = commentService.list(page, size);
return list;
}
@GetMapping("index")
@ResponseBody
public Mapindex(Integer page, Integer size, Model model){
page = 0;
size = 10;
PageInfolist = commentService.list(page, size);
return getDataTable(list);
}
@GetMapping("/")
public String index(){
return "index";
}
}
页面显示效果如下:
附录:
Bootstap Table除了上面介绍的内容外,其还包含了许多别的特性,可参考官方文档:官方文档。
源码链接:https://github.com/ajiuyue/SpringBoot-/tree/master/springboot-mybatis-bootstrap-table