返利商城网站怎么做百度竞价排名模式
使用之前加上头文件：
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