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

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

使用之前加上头文件：

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="bootstrap-table/bootstrap-table.js"></script>
    <script src="bootstrap-table/bootstrap-table-zh-CN.js"></script>

data-toggle

不写JavaScript直接启用table。
  • 使用方法：无需编写 JavaScript 启用 bootstrap table，对普通的 table 设置 data-toggle="table" 即可。
  • 代码示例：
<table data-toggle="table">
     <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>证件号</th>
        </tr>
     </thead>
     <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>11122</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>26</td>
            <td>33322</td>
        </tr>
     </tbody>
</table>
  • 效果：
image.png

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

<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄'
        }, {
            field: 'id',
            title: '证件号'
        }],
        data: [{
            name: '张三',
            age: '18',
            id: '11122'
        }, {
            name: '李四',
            age: '26',
            id: '33322'
        }]
    });
</script>

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

url

服务器数据的加载地址。实际应用中我们不会把数据写在前台然后用data来加载，而是从后台请求数据填入表格中，url便是后台地址。
  • 代码示例：
<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄'
        }, {
            field: 'id',
            title: '证件号'
        }]
    });
</script>

这里没有写后台，就用本地文件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'为降序。
  • 代码示例：
<body>
    <table id="table"></table>
</body>
<script>
    $('#table').bootstrapTable({
        url: 'data/data1.json',
        columns: [{
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄'
        }, {
            field: 'id',
            title: '证件号'
        }],
        undefinedText:'没有数据',
        striped:true,
        sortName:'age',
        sortOrder:'asc'
    });
</script>
  • 效果：
image.png

分页:

pagination

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

pageSize

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

pageNumber

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

paginationPreText

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

paginationNextText

指定分页条中下一页按钮的图标或文字，默认是“>”。
  • 示例代码：
<body>
    <table id="table"></table>
</body>
<script>
    $('#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:'-->'
    });
</script>
  • 效果：
image.png

paginationVAlign

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

paginationHAlign

指定分页详细信息在水平方向的位置。'left' or 'right'。
  • 例如我想使分页条上下都有，并且偏左侧，可以这么写代码：
<body>
    <table id="table"></table>
</body>
<script>
    $('#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启用全匹配搜索，否则为模糊搜索
  • 代码示例：
<body>
    <table id="table"></table>
</body>
<script>
    $('#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
    });
</script>
  • 效果
    初始：
image.png

搜索李四：

image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap（基础一）
    Bootstrap是什么？ 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,917评论 3赞 184
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,868评论 18赞 139
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1赞 92
  • 2017-05-22
    1.时间不够 2.大不让小 3.老大认为以自己为主 4.老二干忧老大 5.老大吃老二的醋 一派宠老大 |二派宠老二...
    心理师刘津伶阅读 173评论 0赞 0
  • 六年后，班长，约不约？
    “初中就来一场轰轰烈烈的恋爱吧！” 当年的随口一说，没想到都成了事实。 初一开学是8月31日，我忘不了那天。 一切...
    麋鹿kid阅读 191评论 2赞 0