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依赖：

    
    
    
    
    
    

    
    
    
    
    
    


    

        

            

                

                    角色：
                    

                        
                    
                
            
            

            

                重置
                搜索
            
        
    
    

    

完成controller接口：

public class BaseController {
    protected Map getDataTable(PageInfo pageInfo) {
        Map rspData = 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 PageInfo list(Integer page, Integer size){
        page = 0;
        size = 10;
        PageInfo list = commentService.list(page, size);
        return list;
    }
    @GetMapping("index")
    @ResponseBody
    public Map index(Integer page, Integer size, Model model){
        page = 0;
        size = 10;
        PageInfo list = 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