Bootstrap Table使用教程：数据表格实战

📝 本文基于作者实际开发经验，已在项目中成功使用 Bootstrap Table 实现数据表格展示。

最近项目中要展示一个表格，就使用了bootstrap的表格，听说巨好用，但是还是碰到了些坑。

1.html编写#

html比较简单，主要就是引入bootstrap的样式和jquery。jquery是为了表格加载直接请求后端接口。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <!-- 引入bootstrap样式 -->
5
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
6
    <!-- 引入bootstrap-table样式 -->
7
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
8

9
    <!-- jquery -->
10
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
11
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
12

13
    <!-- bootstrap-table.min.js -->
14
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
15
    <!-- 引入中文语言包 -->
16
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
17

18
    <meta charset="UTF-8">
19
    <title>测试</title>
20
</head>
21
<body>
22
<table id="myTable" class="table table-hover text-nowrap"></table>
23
</body>
24
</html>

2.Js编写#

js的编写主要就是注意url表示你后端的请求额接口，method请求方法。

responseHandler：因为获取到的数据可能是json，包含记录和一些提示，所以这个函数可以对其进行处理，获得最终记录和列对应。

columns：里面包含的就是初始化表格的列，field对应的是你返回记录的属性，title就是初始化列你取的名字。

1
$(function () {
2
        $('#myTable').bootstrapTable({
3
            method: 'get',  //以post的方式发送请求
4
            url: '/testList',    //url地址，可以是接口也可以是本地json文件
5
            striped: true, // 是否显示行间隔色
6
            pageNumber: 1, // 初始化加载第一页
7
            pagination: true, // 是否分页
8
            sortable: true,  //是否可排序
9
            search: true,    //是否可查询
10
            showColumns: true, //筛选要显示的列
11
            showSearchClearButton: true, //显示搜索清除按钮
12
            pageSize: 10, // 默认单页记录数
13
            pageList: [10, 15, 20],   //分页可选页数
14
            sidePagination: "client", //表示客户端请求
15
            clickToSelect: true,                //是否启用点击选中行
16
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
17
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
18
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
19
            cardView: false,                    //是否显示详细视图
20
            detailView: false,                  //是否显示父子表
21
            onLoadSuccess: function () { //加载成功时执行
22
                debugger;
23
                console.log("加载成功");
24
            },
25
            onLoadError: function () { //加载失败时执行
26
                debugger;
27
                console.error("加载数据失败");
28
            },
29
            responseHandler: function (res) {
30
                //在ajax获取到数据，渲染表格之前，修改数据源
31
                //该项返回的为数据源内的二级列表data
32
                if (res.code == "200") {
33
                    return res.rows;
34
                } else {
35
                    //显示报错信息
36
                    console.error(res);
37
                }
38
            },
39

40
            paginationLoop: true,   //换页按钮设置
41
            paginationHAlign: 'left',
42
            paginationDetailHAlign: 'right',
43
            paginationPreText: '上一页',
44
            paginationNextText: '下一页',
45
            columns: [{
46
                checkbox: true  //左侧复选框，用于多选操作
47
            }, {
48
                title: 'ID',
49
                field: 'id',
50
                visible: false,
51
                align: 'center',
52
                valign: 'middle',
53
                sortable: true
54
            },
55
                {
56
                    title: '序号',
57
                    visible: true,
58
                    align: 'center',
59
                    valign: 'middle',
60
                    width: '50px',
61
                    formatter: function (value, row, index) {
62
                        return index + 1;
63
                    }
64
                },
65
                {
66
                    title: '关键词',
67
                    field: 'keywords',
68
                    visible: true,
69
                    align: 'center',
70
                    valign: 'middle',
71
                    sortable: false,
72
                    width: '160px'
73
                },
74
                {
75
                    title: '新闻标题',
76
                    field: 'newsTitle',
77
                    visible: true,
78
                    align: 'center',
79
                    valign: 'middle',
80
                    sortable: false,
81
                    width: '160px'
82
                },
83
                {
84
                    title: '新闻作者',
85
                    field: 'author',
86
                    visible: true,
87
                    align: 'center',
88
                    valign: 'middle',
89
                    sortable: false,
90
                    width: '160px'
91
                },
92
                {
93
                    title: '创建时间',
94
                    field: 'createDatetime',
95
                    visible: true,
96
                    align: 'center',
97
                    valign: 'middle',
98
                    sortable: false,
99
                    width: '160px'
100
                }
101
            ]
102
        });
103
    });

3.后端java的编写#

这里我是一个类型于新闻的类的列表返回，就是数据库查询多条记录，然后使用map返回数据。碰到了个坑，没有加@ResponseBody的时候显示加载失败。

PS:@ResponseBody是作用在方法上的，@ResponseBody 表示该方法的返回结果直接写入 HTTP response body 中，一般在异步获取数据时使用【也就是AJAX】，这里bootstrap用的就是ajax。

1
import com.website.company.entity.News;
2
import com.website.company.service.NewsService;
3
import org.springframework.beans.factory.annotation.Autowired;
4
import org.springframework.stereotype.Controller;
5
import org.springframework.web.bind.annotation.RequestMapping;
6
import org.springframework.web.bind.annotation.ResponseBody;
7

8
import java.util.HashMap;
9
import java.util.List;
10
import java.util.Map;
11

12
/**
13
 * 类描述：测试类
14
 *
15
 * @ClassName TestController
16
 * @Author ward
17
 * @Date 2022-06-27 10:49
18
 */
19
@Controller
20
public class TestController {
21
    @Autowired
22
    NewsService newsService;
23

24
    @RequestMapping("/testList")
25
    @ResponseBody
26
    public Object testList() {
27
        List<News> datalist = newsService.allNews();
28
        Map map = new HashMap();
29
        map.put("code", "200");
30
        map.put("total", datalist.size());
31
        map.put("rows", datalist);
32
        return map;
33

34
    }
35
}

番外#

在把date格式传回前端给bootstrap的table时只剩下年月日了，前端暂时没有处理办法。所以就在后端进行了处理：增加属性把时间格式转为String，并表示当前属性不是数据库的字段。代码如下：

1
@TableField("CREATE_TIME")
2
private Date createTime;
3

4
@TableField(exist = false)
5
protected String createTimeStr;
6

7
public String getCreateTimeStr() {
8
  SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
9
  return sdf.format(createTime);
10
}
11

12
public void setCreateTimeStr(String createTimeStr) {
13
  this.createTimeStr = createTimeStr;
14
}

1.html编写#

2.Js编写#

3.后端java的编写#

番外#

相关推荐#

文章分享

文章目录