关于bootstraptable的使用

bootstraptable作为常用的表格控件一直拥有者很多的忠实用户，本人原来使用过一次，但是今天再次使用时又再次翻看文档，古做记录，方便下次使用，也给没用过的朋友可以做一些借鉴。 

bootstraptable官网地址:https://examples.bootstrap-table.com/index.html

项目环境介绍：

使用的是模板引擎：thymleaf，在语法上和传统的页面有些区别，不过也只是该写路径的标签而已

第一步：引入所需的文件

<-- 引入4.0版本的bootstrap.css，table使用了部分这个css的样式-->

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>

<-- 引入bootstrap特有的css文件-->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css"/>

<--引入bootstraptable特有的js文件-->

<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>

<--引入4.0版本bootstrap的js文件-->

<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<-- 这个是语言包，有了这个才能支持中文，这个就是bootstrap-table支持国际化的核心所在-->
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>

第二步：创建table容器

bootstrap-table的使用有两种方式，第一种就是传统的html的方式，直接写死dom，第二种就是动态渲染也就是给一个请求地址，根据请求地址返回的值来渲染dom，这个也是最常用的方式。

    <table id="testtable" class=" table-striped">

第三步：进行渲染和填值（此处赋值是直接写死的，也可以写url进行动态赋值）

  $("#testtable").bootstrapTable({
               columns: [{
                   field: 'id',
                   title: 'Item ID'
               }, {
                   field: 'name',
                   title: 'Item Name'
               },{
                   field: 'price',
                   title: 'Item Price'
               }],
               data: [{ //数据
                   id: 1,
                   name: 'Item 1',
                   price: '$1'
               }, {
                   id: 2,
                   name: 'Item 2',
                   price: '$2'
               }, {
                   id: 3,
                   name: 'Item 3',
                   price: '$2'
               }, {
                   id: 4,
                   name: 'Item 4',
                   price: '$2'
               }]
           });

完成

可以看到上面的图标还是比较单调的，官方给了我们几种风格，可以给table标签加class的方式来使用或者组合样式

 

备注：其实所有的答案都在官网，不然就是在代码里，现在只是在做知识的搬运工。