表格插件-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的分页的实现使用示例

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java架构师

资源文件的动态加载

页面加载 首先,浏览器发起直接对目标html的请求,然后分析其中用到的资源并下载,浏览器有自己的规则来判断什么样的资源可以被并行下载,什么样的不可以,浏览器对加...

38990
来自专栏游戏杂谈

预加载JavaScript/CSS但不执行

好吧,一个方案一个方案来分析一下(要求是不允许执行Javascript和应用CSS,以免消耗系统资源):

19420
来自专栏卡少编程之旅

fiddler抓包工具(windows)

864150
来自专栏我的博客

谷歌浏览器扩展程序开发

先说为何要学这个,我们公司部署项目的时候有一个选择按钮,每次都得选中才能提交!于是就。。。 直接上代码! 配置文件:manifest.json { ...

29130
来自专栏葡萄城控件技术团队

SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

12320
来自专栏IT 指南者专栏

Angular 框架学习笔记(一)

过来人肯定都知道, Angular 是一个框架,为何现在突然要学 Angular 呢?

14930
来自专栏Objective-C

Xcode 清理存储空间

45350
来自专栏开发之途

用WordPress搭建个人网站(1)

58860
来自专栏Python爬虫实战

MySQL 从零开始:02 MySQL安装

14830
来自专栏Jerry的SAP技术分享

微信程序开发系列教程(四)使用微信API创建公众号自定义菜单

大家可能经常看到一些微信公众号具有功能强大的自定义菜单,点击之后可以访问很多有用的功能。

12210

扫码关注云+社区

领取腾讯云代金券