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. NEST 自定义分析器

    public void SetAnalysis() { if (!client.IndexExists("employee").Exists) { client.CreateInd ...

  2. java中异常的抛出:throw throws

    java中异常的抛出:throw throws Java中的异常抛出 语法: public class ExceptionTest{ public void 方法名(参数列表) throws 异常列表 ...

  3. JavaWeb 之 JSON

    一.概述 1.概念 JSON:JavaScript Object Notation  JavaScript对象表示法 2.基本格式 var p = {"name":"张三 ...

  4. 技术圈术语之LDAP

    导语:阅读一些程序的文档时经常看到支持ldap,由于对这个协议不太熟悉,平时也没有用过,所以一直也没怎么留意,今天看rabbitmq的文档又发现了ldap相关的介绍,于是想把这个问题搞清楚. 一.LD ...

  5. python+java全栈工程师 转 向前端的路

    python的优点 简单 简单 简单 我目前在公司用python 1. 增加odoo的各种业务,成本核算.自动跑单.自动备份数据库之类的 ----odoo是国外大佬做的一个开源erp 用的python ...

  6. dom4j 解析字符串成树形结构

    引入maven依赖: <dependency> <groupId>dom4j</groupId> <artifactId>dom4j</artif ...

  7. es截取指定的字段返回

    SearchResponse response = client.prepareSearch(index_name).setTypes("lw_devices") .setFrom ...

  8. Centos7安装DockerCE

    1. 说明 以下使用的系统为centos7,64位,镜像为CentOS-7-x86_64-Minimal-1804,所有操作以root用户操作 2. 安装Docker官方源 2.1 安装yum工具集 ...

  9. ETL讲解

    ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要的一个环节. 通常情况下,在 ...

  10. Linux LVM 逻辑卷管理

    使用Linux好久了,一定会意识到一个问题,某个分区容量不够用了,想要扩容怎么办?这里就涉及到LVM逻辑卷的管理了,可以动态调整Linux分区容量. LVM 概述 全称Logical Volume M ...