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. java中常见关键字的介绍

    Java中类,属性,方法修饰符 public 公共访问权限,不但在本应用中可以放问,其他应用也可以访问.接口中的方法默认都是public的 protected 被protected修改的:可以被本类, ...

  2. js的splice和delete

    例如有一个数组是 :var textArr = ['a','b','c','d']; 这时我想删除这个数组中的b元素: 方法一:delete 删除数组 delete textArr[1]  结果为: ...

  3. DotNet Core 2.2 MVC Razor 页面编译为 View.dll 文件的解决方法

    使用文本文件编辑器打开项目文件,找到: <PropertyGroup>     <TargetFramework>netcoreapp2.0</TargetFramewo ...

  4. 浅谈分词算法基于字的分词方法（HMM）

    前言 在浅谈分词算法(1)分词中的基本问题我们讨论过基于词典的分词和基于字的分词两大类,在浅谈分词算法(2)基于词典的分词方法文中我们利用n-gram实现了基于词典的分词方法.在(1)中,我们也讨论了 ...

  5. 从客户端中检测到有潜在危险的 Request.QueryString 值

    解决办法: 一.解决方法是在web.config的 里面加入<system.web> <pages validateRequest="false"/>< ...

  6. Java服务端口被占用问题

    在改code的时候eclipse突然崩溃了,未响应状态等了好久也没转完,只能结束进程了,再次打开eclipse果然无法启动项目.报的错误是端口被占用. 又不想重启电脑,只能记录下微服务下的卡死清理端口 ...

  7. c# 泛型study

    1.引用类型约束:  类型实参包含任何类,接口,数组,委托,或者是已知是引用类型的另一个类型参数 class demo<T> where T:class 有效的封闭区间demo<St ...

  8. mysql 设置查看字符集

    MySQL查看和修改字符集的方法   一.查看字符集 1.查看MYSQL数据库服务器和数据库字符集 方法一:show variables like '%character%';方法二:show var ...

  9. Yii2 路由美化

    一.美化路由形式 如:localhost/index.php?r=site/index 这种路由形式对SEO不友好,那么是否可以对路由进行一下美化呢?在Yii2中我们可以将路由必成以下的形式: 如:l ...

  10. AD10生成Gerber文件详细步骤

    参考:https://wenku.baidu.com/view/faf0363c195f312b3069a5d2.html