bootstrapt学习指南_Bootstrap Table学习指南

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