Web编程 订阅所有【Web编程】的日志

Bootstrap Table基本使用示例

编辑:dnawo 日期:2019-11-22

字体大小: 小 中 大
Bootstrap Table是一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能，一个基本的Bootstrap Table页面模板如下：

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bootstrap Table基本使用示例</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--引入Bootstrap Table及关联样式-->
        <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.6.3/css/all.css">
        <link rel="stylesheet" href="//unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    </head>

    <body>
        <!--内容-->

        <!--引入Bootstrap Table及关联脚本-->
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="//stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script src="//unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
        <script src="//unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    </body>
</html>

一、使用HTML属性设置Bootstrap Table

1、通过data-toggle="table"设置普通表

复制内容到剪贴板程序代码 程序代码
<table data-toggle="table">
    <thead>
        <tr>
            <th>Item ID</th>
            <th>Item Name</th>
            <th>Item Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Item 1</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item 2</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>

2、通过data-url设置使用远程URL数据

复制内容到剪贴板程序代码 程序代码
<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

data1.json：
复制内容到剪贴板程序代码 程序代码
[{
    "id": "1",
    "name": "Item 1",
    "price": "$1"
}, {
    "id": "2",
    "name": "Item 2",
    "price": "$2"
}]

3、通过data-pagination、data-search、data-sortable为表格增加分页、搜索、排序功能

复制内容到剪贴板程序代码 程序代码
<table data-toggle="table" data-url="data1.json" data-pagination="true" data-search="true" data-sortable="true">
    <thead>
        <tr>
            <th data-field="id" data-sortable="true">Item ID</th>
            <th data-field="name" data-sortable="true">Item Name</th>
            <th data-field="price" data-sortable="true">Item Price</th>
        </tr>
    </thead>
</table>

PS：必须table和th的data-sortable都为true，th的排序才会生效。

二、使用Javascript设置Bootstrap Table

1、通过Javascript设置普通表

复制内容到剪贴板程序代码 程序代码
<table id="table"></table>

<script>
    $('#table').bootstrapTable({
        columns: [{
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }],
        data: [{
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 2,
            name: 'Item 2',
            price: '$2'
        }]
    })
</script>

2、通过url设置使用远程URL数据

复制内容到剪贴板程序代码 程序代码
<script>
    $('#table').bootstrapTable({
        url: 'data1.json',
        columns: [{
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }]
    })
</script>

3、通过pagination、search、sortable为表格增加分页、搜索、排序功能

复制内容到剪贴板程序代码 程序代码
<script>
    $('#table').bootstrapTable({
        url: 'data1.json',
        pagination: true,
        search: true,
        sortable: true,
        columns: [{
            field: 'id',
            title: 'Item ID',
            sortable: true                    
        }, {
            field: 'name',
            title: 'Item Name',
            sortable: true
        }, {
            field: 'price',
            title: 'Item Price',
            sortable: true
        }]
    })
</script>

相关链接

[1].Bootstrap Table官网：https://bootstrap-table.com/
[2].Bootstrap Table中文网：https://www.bootstrap-table.com.cn/
[3].Bootstrap Table API：https://bootstrap-table.com/docs/api
[4].Bootstrap Table Examples：https://live.bootstrap-table.com/

上一篇: 插排火线零线都带电故障解决
下一篇: Bootstrap Table服务器端分页使用示例
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 2548
发表评论
请登录后再发表评论！