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. spring boot 分布式锁组件 spring-boot-klock-starter

    基于redis的分布式锁spring-boot starter组件,使得项目拥有分布式锁能力变得异常简单,支持spring boot,和spirng mvc等spring相关项目 快速开始 sprin ...

  2. .net 后台以post方式调用微信公众平台接口

    public class Fresult { public int errcode { get; set; } public string errmsg { get; set; } public st ...

  3. js事件(十二)

    一.事件三要素1.事件目标[谁触发的该事件(引起该事件触发的源头:target)]2.事件处理程序[处理相应事件的函数]3.事件对象[触发事件产生的携带事件信息的对象] 二.事件流[从页面中接受事件的 ...

  4. spring boot 集成 sitemesh

    一.Sitemesh简介 Sitemesh是由一个基于Web页面布局.装饰及与现存Web应用整合的框架,是一个装饰器.它能帮助我们在由大量页面工程的项目中创建一致的页面布局和外观,如一致的导航条.一致 ...

  5. 图说jdk1.8新特性（2）--- Lambda

    简要说明 jdk常用函数式接口 Predicate @FunctionalInterface public interface Predicate<T> { boolean test(T ...

  6. MyBatis日记（五）：一对一关系，一对多关系

    一对一关系: 首先在数据库中新增地址表(t_address)用于存储人员的地址信息: CREATE TABLE `t_address` ( `id` ) NOT NULL AUTO_INCREMENT ...

  7. 【HCIA Gauss】学习汇总-数据库管理(SQL语法 数据类型 函数)-4

    DDL data definition language 数据库定义语言 定义修改等DML data manipulation language 数据库操控语言 增删改 DCL data crontr ...

  8. git track remot

    echo "# test" >> README.md git init git add README.md git commit -m "first comm ...

  9. ArrayList 与LinkedList 的区别及分别的优缺点

    ArrayList,与LinkedList都是属于实现了List接口的类.首先从名字前缀开始看  ,Array表示数组,Link表示链表. 所以ArrayList底层是基于动态数组的.而LinkedL ...

  10. 《老子》是帝王术，提倡复古，崇拜圣人，主张愚民，甘居下流，不争上游：4星|李零《人往低处走:<老子>天下第一》

    ​​“ 俗话说,“人往高处走,水往低处流”.<老子>正好相反,它强调的是作“天下谷”.“天下溪”.“天下之牝”,甘居下流,不争上游(第28和第61章).司马谈说,道家的特点是“去健羡,绌聪 ...