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. windows平台上编译mongdb-cxx-driver

    编译方法见以下链接,写的非常详细 http://www.pianshen.com/article/9722211716/ 我的编译环境和编译工具如下: 环境:win7或者win10,都试过,没有任何区 ...

  2. EgretWing链接微信开发工具调试问题

    EgretWing链接微信开发工具调试问题 EgretWing 编译器支持持三种调试模式,Node.js .Chrome .EgretWing 扩展开发. 开发过程中会遇到工具配置错误. 这就需要在E ...

  3. ：阿里巴巴 Java 开发手册 （十一）工程结构

    (一) 应用分层 1. [推荐]图中默认上层依赖于下层,箭头关系表示可直接依赖,如:开放接口层可以依赖于 Web 层,也可以直接依赖于 Service 层,依此类推:  开放接口层:可直接封装 Se ...

  4. .NET core Quartz 定时任务框架 demo

    开始先建个空的web项目. 创建一个新类 QuartzFactory 狠狠的复制就完事了. public class QuartzFactory : IJobFactory { private rea ...

  5. MongoDB和Java（4）：Spring Data整合MongoDB（XML配置）

    最近花了一些时间学习了下MongoDB数据库,感觉还是比较全面系统的,涉及了软件安装.客户端操作.安全认证.副本集和分布式集群搭建,以及使用Spring Data连接MongoDB进行数据操作,收获很 ...

  6. 【开发工具】- 设置Sublime支持韩文展示

    菜单栏 --> 首选项 --> 设置 -->User 添加以下代码 { "font_size": 12, "show_encoding":tr ...

  7. Vue项目整体架构记要

    此文记录初次学习Vue的一些记要,可做为参考,导图有些生涩,故意不再加以修复完善,以持初心!

  8. postman 在pre-request中发送application/x-www-form-urlencoded 格式表单

    postman中在pre-request 发送请求 知识点: json数据解析和遍历 application/x-www-form-urlencoded表单 Array基本使用 js函数 http请求 ...

  9. 二十七、mysql如何确保数据不丢失？有几点值得我们借鉴

    本篇文章我们先来看一下mysql是如何确保数据不丢失的,通过本文我们可以了解mysql内部确保数据不丢失的原理,学习里面优秀的设计要点,然后我们再借鉴这些优秀的设计要点进行实践应用,加深理解. 预备知 ...

  10. JAVA 容器配置 JVM 监控

    目前世面上较流行的JAVA容器工具有:tomcat,jboss,weblogic 在日常工作中,经常会遇到开发需要查看JVM相关信息,这时就需要开启JVM. 一.tomcat 1 修改jdk认证配置文 ...