Bootstrap Table 学习笔记之表格参数（一）

官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

使用之前加上头文件：

data-toggle

不写JavaScript直接启用table。

• 使用方法：无需编写 JavaScript 启用 bootstrap table，对普通的 table 设置 data-toggle="table" 即可。
• 代码示例：

     

        

            
姓名
            
年龄
            
证件号
        
     
     

        

            
张三
            
18
            
11122
        
        

            
李四
            
26
            
33322
        
     

• 效果：

image.png

实际情况下我们一般使用JavaScript方式来启用Bootstrap Table，代码如下：

显示效果同上。
columns为列配置项，data为填入表格的数据，数据格式为json。

url

服务器数据的加载地址。实际应用中我们不会把数据写在前台然后用data来加载，而是从后台请求数据填入表格中，url便是后台地址。

• 代码示例：

这里没有写后台，就用本地文件data1.json来代替。data1.json文件内容如下：

[{"name":"张三","age":"18","id":"11122"},{"name":"李四","age":"26","id":"22233"}]

classes

表格的类名称。可用的样式见bootstrap全局css样式。

height

表格高度，数据类型为number。

undefinedText

当数据为 undefined 时显示的字符，默认是"-"，可以自己定义，例如:

    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄'
        }, {
            field: 'id',
            title: '证件号'
        }],
        undefinedText:'没有数据'
    });

添加一项数据：{"name":"李四","age":"26"}，项“id”没有数据，显示效果则为：

image.png

striped

设置为true时有隔行变色的效果，默认是false。

排序：

sortName

定义排序列,通过url方式获取数据填写字段名，否则填写下标。

sortOrder

定义排序方式 'asc' 或者 'desc'，'asc'为升序，'desc'为降序。

• 代码示例：

• 效果：

image.png

分页:

pagination

默认false,设置为 true 会在表格底部显示分页条。

pageSize

每页显示的数据条数，数据类型为Number。

pageNumber

第一页的页码数，数据类型为Number。

paginationPreText

指定分页条中上一页按钮的图标或文字，默认是“<”。

paginationNextText

指定分页条中下一页按钮的图标或文字，默认是“>”。

• 示例代码：

• 效果：

image.png

paginationVAlign

指定分页条在垂直方向的位置。'top' or 'bottom' or 'bonth'。

paginationHAlign

指定分页详细信息在水平方向的位置。'left' or 'right'。

• 例如我想使分页条上下都有，并且偏左侧，可以这么写代码：

• 效果
  初始：

image.png

搜索李四：

image.png