bootstrap-table的简单使用

最新推荐文章于 2020-06-17 23:12:48 发布

otatoz

最新推荐文章于 2020-06-17 23:12:48 发布

阅读量552

点赞数

分类专栏： bootstrap 文章标签： bootstrap-table 插件 table序号分页表格

本文链接：https://blog.csdn.net/qq_42720683/article/details/88050499

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是bootstrap-table

本文介绍的bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

即bootstrap-table是一款插件。

引入文件相关文件

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<link href="https://cdn.bootcss.com/bootstrap-table/1.13.4/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.13.4/bootstrap-table.min.js"></script>

建一个table

<div class="container">
    //data-url代表引用数据所在的地址
    //data-pagination代表是否分页
    <table id="table"
           data-toggle="table"
           data-url="data/data1.json"
           data-show-columns="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-pagination="true"
           data-height="500">
        <thead>
        <tr>
            <th data-field="id" data-formatter="idFormatter">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

给每一列加编号

function idFormatter(value) {
    return value + 1;
}

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://cdn.bootcss.com/bootstrap-table/1.13.4/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.13.4/bootstrap-table.min.js"></script>
</head>
<body>

<div class="container">
    <table id="table"
           data-toggle="table"  
           data-url="data/data1.json"  
           data-show-columns="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-pagination="true"
           data-height="500">
        <thead>
        <tr>
            <th data-field="id" data-formatter="idFormatter">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

<script>
    function idFormatter(value) {
        return value + 1;
    }
</script>
</body>
</html>

效果：

注意：引入data1.json文件时要特别注意，文件名错误或者路径不对，都会报跨域请求错误

我这边的结构如下：所以用的路径是 data-url="data/data1.json"

代码链接：https://pan.baidu.com/s/101ofoGCFtpxrS46JhlUcnQ

提取码：ddnc

-------------------本文完-------------------

otatoz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table的简单使用

什么是bootstrap-table 本文介绍的bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以...
复制链接

扫一扫

专栏目录