BootStrap Table 下载：https://v3.bootcss.com/getting-started/

BootStrap Table Css：https://v3.bootcss.com/css/

BootStrap Table 组件：https://v3.bootcss.com/components/

附上一个BootStrapTablle的简单例子：

效果：

目录结构：

代码：

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/bootstrap-table.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

    <style>

        #mytab  thead{background: #5488c4;}

        #mytab tr:nth-child(even){

            background:#f4f8fb;

        }

    </style>

  </head>

  <body>

          <table id="mytab" class="table table-hover"></table>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

        <script src="js/jquery.min.js"></script>

        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

        <script src="js/bootstrap.min.js"></script>

        <!-- 加载 Bootstrap-Table 插件 -->

        <script src="js/bootstrap-table.min.js"></script>

        <!-- 汉化插件 -->

        <script src="js/bootstrap-table-zh-CN.min.js"></script>

        <script type="application/javascript">

            $('#mytab').bootstrapTable({

                url: 'json/data.json',

                queryParams: "queryParams",

                toolbar: "#toolbar",

                sidePagination: "true",

                striped: true, // 是否显示行间隔色

                search : "true",

                uniqueId: "ID",

                pageSize: "5",

                pagination: true, // 是否分页

                sortable: true, // 是否启用排序

                showToggle:true,

                columns: [{

                        field: 'id',

                        title: '登录名'

                    },

                    {

                        field: 'name',

                        title: '昵称'

                    },

                    {

                        field: 'price',

                        title: '角色'

                    },

                    {

                        field: 'price',

                        title: '操作',

                        width: 120,

                        align: 'center',

                        valign: 'middle',

                        formatter: actionFormatter,

                    },

                ]

            });

            //操作栏的格式化

            function actionFormatter(value, row, index) {

                var id = value;

                var result = "";

                result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span>编辑</a>";

                result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span>删除</a>";

                return result;

            }

        </script>

  </body>

</html>

BootstrapTable 表格插件的更多相关文章

  1. 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  2. bootstrap-table表格插件的使用案例

    近期刚刚结束一个项目,总结一下之前做的一个后台管理系统中用到的bootstrap-table表格插件,下面是我做的一个案例(展示主要代码部分): //请求服务数据时所传参数 function quer ...

  3. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候，对树列表条件和查询条件的处理

    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...

  4. Bootstrap-table表格插件的使用方法

    前言 上次写了一个可拖动列表的插件,但除了这个特点没什么优点了,接下写的是我们常用的Bootstrap-table表格插件 正文 官网:https://bootstrap-table.com/ 有两个 ...

  5. ABP入门系列（14）——应用BootstrapTable表格插件

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)--分页实现讲解了如何进行分页展示,但其分页展示仅适用于 ...

  6. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  7. bootstrap表格插件——Bootstrap-Table

    注:本文引用自:http://www.cnblogs.com/wuhuacong/p/7284420.html 一.概述 1.是什么 是一个基于bootstrap的灌数据式的表格插件 2.能干什么 可 ...

  8. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  9. 表格插件BootStrap-Table使用教程

    Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件,功能比较完备,能够实现数据异步获取,编辑,排序等一系列功能. 官网https://bootstrap-tab ...

随机推荐

  1. python中的{字典}

    目录 字典--dict { } 字典是无序,可变的数据类型. 字典:用于存储数据,存储大量数据,字典要比列表快:将数据和数据之间进行关联. 定义: dic = {键:值,键:值} #每个 键值对 以逗 ...

  2. 拓展 - Webrtc 的回声抵消(aec、aecm)算法简介

    webrtc 的回声抵消(aec.aecm)算法简介 原文链接:丢失.不好意思        webrtc 的回声抵消(aec.aecm)算法主要包括以下几个重要模块:1.回声时延估计 2.NLMS( ...

  3. Linux--重要文件

    目录 /etc/resolv.conf /etc/host /etc/sysconfig/network /etc/fstab /etc/rc.local /etc/profile /etc/bash ...

  4. Apache 正向代理与反向代理配置

    Apache提供了 mod_proxy 模块用于提供代理服务,能够支持的包括正向代理.反向代理.透明代理.缓存.负载均衡,HTTP代理.FTP代理.SSL代理等若干强大的功能. 配置代理方法很简单那, ...

  5. ubuntu16.04部署vsftpd

    问题描述: 之前在centos6/7可以快速构建vsftpd服务,在ubuntu上频繁出错.最后发现是vsftpd版本比较新(新增安全特性导致的) 问题解决: 加上对应参数即可解决问题 window资 ...

  6. 【RocketMQ异常】Caused by: com.aliyun.openservices.shade.com.alibaba.rocketmq.client.exception.MQClientException: No route info of this topic, message-service-topic-testf

    一.异常信息 -- ::-thread-] ERROR c.x.x.r.service.producer.ali.AliMQProducerProcess.sendMessageFromQueue(A ...

  7. python笔记--------一

    作用域: 每个变量或函数都有自己的作用域. 每个函数都定义了一个命名空间,也称为作用域. 在最顶层有一个符号表会跟踪这一层所有的名称定义和和他们当前的绑定. 调用函数时,会建立一个新的符号表(常称为栈 ...

  8. 【转】高性能网络编程7--tcp连接的内存使用

    当服务器的并发TCP连接数以十万计时,我们就会对一个TCP连接在操作系统内核上消耗的内存多少感兴趣.socket编程方法提供了SO_SNDBUF.SO_RCVBUF这样的接口来设置连接的读写缓存,li ...

  9. 数据库开发-Django ORM的一对多查询

    数据库开发-Django ORM的一对多查询 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.联合主键问题 CREATE TABLE `employees` ( `emp_no` ...

  10. 关于ssh_config和sshd_config

    转载:https://www.cnblogs.com/panda2046/p/5933498.html   在远程管理linux系统基本上都要使用到ssh,原因很简单:telnet.FTP等传输方式是 ...