表格插件-bootstrap table的使用示例

简介: 表格插件-bootstrap table的使用示例

基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

1:在官网上下载相关的文件之后,步骤下载之后引入:

<!-- 引入的css文件  -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-table/dist/bootstrap-table.min.css"
    rel="stylesheet">
<!-- 引入的js文件 -->
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

2:开始写代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 引入的css文件  -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap-table.min.css" rel="stylesheet">
        <title></title>
    </head>
    <body>
        <table id="mytable"></table>
    </body>
    <!-- 引入的js文件 -->
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script>
        $('#mytable').bootstrapTable({
            columns: [{
                field: 'id',
                title: '编号名'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'photo',
                title: '联系方式'
            }],
            data: [{
                id: 1,
                name: '王小婷',
                photo: '1373717324'
            }, {
                id: 2,
                name: '安安',
                photo: '131313'
            }]
        });
    </script>
</html>

3:效果如下:

另外一种方法:通过url请求本地json格式数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 引入的css文件  -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap-table.min.css" rel="stylesheet">
        <title></title>
    </head>
    <body>
        <table id="mytable"></table>
    </body>
    <!-- 引入的js文件 -->
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script>
        $('#mytable').bootstrapTable({
    url: '1.json',
    columns: [{
        field: 'id',
        title: '编号'
    }, {
        field: 'name',
        title: '姓名'
    }, {
        field: 'photo',
        title: '联系'
    }, ]
});
    </script>
</html>

json:

[
{           "id":"1",
            "name":"王小婷",
            "photo":"1234567"
},
{
             "id":"1",
            "name":"安安",
            "photo":"42353473"
}
]

表格如下:

相关文章
|
4月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
42 1
|
4月前
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
37 0
|
4月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
19 0
|
4月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
42 0
|
4月前
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
18 0
|
4月前
|
前端开发
解决bootstrap table刷新加载时白色闪屏问题
解决bootstrap table刷新加载时白色闪屏问题
28 0
|
4月前
|
前端开发
bootstrap table+layer实现一个表格删除
bootstrap table+layer实现一个表格删除
17 0
|
4月前
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
33 2
|
5月前
|
前端开发 容器
|
5月前
|
前端开发 容器