来人，上效果图

走官方通道

1、引入样式文件（去github下载样式文件）

　　 <!--插件开-->

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

    <link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-editable.css">

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

    <!-- JavaScript -->

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

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

    <script src="__PUBLIC__/btjs/bootstrap-editable.min.js"></script>

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

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

    <!--插件结-->

    <!-- Page Specific Plugins -->

    <script src="__PUBLIC__/btjs/raphael-min.js"></script>

    <script src="__PUBLIC__/btjs/tablesorter/jquery.tablesorter.js"></script>

2、糊代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>layui</title>

    <meta name="renderer" content="webkit">

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

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

    <!--插件开-->

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

    <link rel="stylesheet" href="__PUBLIC__/btcss/bootstrap-editable.css">

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

    <!-- JavaScript -->

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

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

    <script src="__PUBLIC__/btjs/bootstrap-editable.min.js"></script>

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

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

    <!--插件结-->

    <!-- Page Specific Plugins -->

    <script src="__PUBLIC__/btjs/raphael-min.js"></script>

    <script src="__PUBLIC__/btjs/tablesorter/jquery.tablesorter.js"></script>

</head>

<body style=" margin-top: 0px;">

<div class="tplay-body-div">

    <table class="table table-bordered table-hover table-striped tablesorter"

           data-toggle="table"  ///////////////////////////////////////////////////////////重点在这！！！！！！！敲黑板！！！！！！！！！下次要考！！！！！！！！！！！！！！！！！！

           data-pagination="false"

           data-pagination-loop="false"

           data-search="true"

           data-show-pagination-switch="false"

           data-show-columns="true"

           data-page-number="1"

           data-page-size="5"

           data-page-list="[5,10,25]"

           data-click-to-select="true"

           data-single-select="true"

           data-striped="true">

        <thead>

        <tr>

            {volist name="fieldinfo" id="val"}

            <th >{$val.Comment}</th>

            {/volist}

        </tr>

        </thead>

        <tbody>

            {volist name="data" id="v"}

            <tr>

                {volist name="field" id="z"}

                <td>{$v["$z"]}</td>

                {/volist}

            </tr>

            {/volist}

        </tbody>

    </table>

    {$data->render()}

</div>

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

</body>

</html>

3、文件全部引入后，可能会出现没有图标的问题，没关系， 在 bootstrap.min.css 同级的文件下放入 bootstrap-theme.min.css ，万事大吉

使用Bootstrap实现表格列的显示与隐藏的更多相关文章

  1. element-ui表格列金额显示两位小数

    对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值 和 v-b ...

  2. 用Javascript，DHTML控制表格的某一列的显示与隐藏

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  3. Plugin 表格列自定义显示隐藏插件TableCustom.js

    TableCustom 案例展示 下载地址 https://github.com/chaorenzeng/TableCustom.js.git 快速使用 1.引入TableCustom.css和Tab ...

  4. js控制easyui datagrid列的显示和隐藏

    easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列

  5. DevExpres表格控件运行时动态设置表格列

    本文是系列文章,陆续发表于电脑编程技巧与维护杂志. DevExpres产品是全球享有极高声誉的一流控件套包产品!国内典型用户包括:用友.金蝶.神州数码.工信部.中国石化.汉王科技等众多大中型科技型企业 ...

  6. table表格超出部分显示省略号

    做table表格时,某一列字数比较多,希望超出宽度的部分以省略号显示 设置table的布局 默认automatic 以表格内容显示相应宽度 改成fixed 以表格列宽显示内容 table{    ta ...

  7. bootstrap table表格属性、列属性、事件、方法

    留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...

  8. [转]javascript 快速隐藏/显示万行表格列的方法

    原文地址:javascript 快速隐藏/显示万行表格列的方法 隐藏表格列,最常见的是如下方式: td.style.display = "none"; 这种方式的效率极低.例如,隐 ...

  9. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

随机推荐

  1. adb的经常使用命令(android debud bridge)

    android调试桥: adb命令使用须要在系统环境遍历中path中追加adb.exe的完整路径D:\IDE\adt-bundle-windows-x86-20130729\sdk\platform- ...

  2. The threads in the thread pool will process the requests on the connections concurrently.

    https://docs.oracle.com/javase/tutorial/essential/concurrency/pools.html Most of the executor implem ...

  3. DuiLib笔记之Window常用属性

    caption 可拖拽以移动窗口的标题区,类型:RECT.例如,要指定标题区高度为35,可设置caption="0,0,0,35" mininfo 窗口最小尺寸,类型:SIZE.例 ...

  4. LeetCode（83）Remove Duplicates from Sorted List

    题目 Given a sorted linked list, delete all duplicates such that each element appear only once. For ex ...

  5. Machine Learning in Action(6) AdaBoost算法

    Adaboost也是一种原理简单,但很实用的有监督机器学习算法,它是daptive boosting的简称.说到boosting算法,就不得提一提bagging算法,他们两个都是把一些弱分类器组合起来 ...

  6. leetcode 790. Domino and Tromino Tiling

    We have two types of tiles: a 2x1 domino shape, and an "L" tromino shape. These shapes may ...

  7. 如何把wecenter的推荐的问题模块单独调取出来？

    查阅文档: http://wenda.wecenter.com/question/1893 http://www.zhidiu.com/article/1012 http://wenda.wecent ...

  8. js事件传播的一个疑惑

    在学习事件传播的时候,发现一个问题,当时是这样子的. 我给多层元素分别绑定了冒泡和捕获事件.按道理应该先从外向内执行完所有的捕获事件,再由内向外执行所有的冒泡事件. 但是天不随人愿啊,有个元素偏偏先执 ...

  9. Chkrootkit安装配置教程 – Linux后门入侵检测

    rootkit从浅显的层面来讲即一种具有自我隐蔽性的后门程序,它往往被入侵者作为一种入侵工具.通过rootkit,入侵者可以偷偷控制被入侵的电脑,因此危害巨大.chkrootkit是一个Linux系统 ...

  10. Mybatis一二级缓存的理解

        频繁的数据库操作是非常耗费性能的(主要是因为对于DB而言,数据是持久化在磁盘中的,因此查询操作需要通过IO,IO操作速度相比内存操作速度慢了好几个量级),尤其是对于一些相同的查询语句,完全可以 ...