html表格参数位置,Bootstrap Table 学习笔记之表格参数（一）

使用之前加上头文件：

data-toggle

不写JavaScript直接启用table。

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

代码示例：

姓名年龄证件号

张三1811122李四2633322

效果：

image.png

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

$('#table').bootstrapTable({

columns: [{

field: 'name',

title: '姓名'

}, {

field: 'age',

title: '年龄'

}, {

field: 'id',

title: '证件号'

}],

data: [{

name: '张三',

age: '18',

id: '11122'

}, {

name: '李四',

age: '26',

id: '33322'

}]

});

显示效果同上。

columns为列配置项，data为填入表格的数据，数据格式为json。

url

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

代码示例：

$('#table').bootstrapTable({

url: 'data/data1.json',

columns: [{

field: 'name',

title: '姓名'

}, {

field: 'age',

title: '年龄'

}, {

field: 'id',

title: '证件号'

}]

});

这里没有写后台，就用本地文件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'为降序。

代码示例：

$('#table').bootstrapTable({

url: 'data/data1.json',

columns: [{

field: 'name',

title: '姓名'

}, {

field: 'age',

title: '年龄'

}, {

field: 'id',

title: '证件号'

}],

undefinedText:'没有数据',

striped:true,

sortName:'age',

sortOrder:'asc'

});

效果：

image.png

分页:

pagination

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

pageSize

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

pageNumber

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

paginationPreText

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

paginationNextText

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

示例代码：

$('#table').bootstrapTable({

url: 'data/data1.json',

columns: [{

field: 'name',

title: '姓名'

}, {

field: 'age',

title: '年龄'

}, {

field: 'id',

title: '证件号'

}],

undefinedText:'没有数据',

striped:true,

sortName:'age',

sortOrder:'asc',

pagination:'true',

pageSize:1,

pageNumber:1,

paginationPreText:'

paginationNextText:'-->'

});

效果：

image.png

paginationVAlign

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

paginationHAlign

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

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

$('#table').bootstrapTable({

url: 'data/data1.json',

columns: [{

field: 'name',

title: '姓名'

}, {

field: 'age',

title: '年龄'

}, {

field: 'id',

title: '证件号'

}],

undefinedText:'没有数据',

striped:true,

sortName:'age',

sortOrder:'asc',

pagination:'true',

pageSize:1,

pageNumber:1,

paginationPreText:'

paginationNextText:'-->',

paginationVAlign:'both',

paginationHAlign:'left'

});

效果：

image.png

搜索框

search

默认为false，设置为true时启用搜索框。

searchOnEnterKey

设置为 true时，按回车触发搜索方法，否则无需按键自动触发搜索方法，默认为false。

searchText

设置初始搜索文字

strictSearch

设置为 true启用全匹配搜索，否则为模糊搜索

代码示例：

$('#table').bootstrapTable({

url: 'data/data1.json',

columns: [{

field: 'name',

title: '姓名'

}, {

field: 'age',

title: '年龄'

}, {

field: 'id',

title: '证件号'

}],

undefinedText:'没有数据',

striped:true,

sortName:'age',

sortOrder:'asc',

search:'true',

searchOnEnterKey:true,

searchText:'张三',

strictSearch:true

});

效果

初始：

image.png

搜索李四：

image.png