bootstrap table的使用教程

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

官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/

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"
}


]

表格如下：

下一篇：
表格插件-bootstrap table的分页的实现使用示例

原文作者：祈澈姑娘

bootstrap table的使用教程

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

猜你喜欢