来人，上效果图

走官方通道

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. Tomcat appears to still be running with PID 19564. Start aborted

    产生原因:tomcat 异常关闭, 或强行终止导致(如断电等....) 如你所见 .  tomcat 在linux  关, 关不了. 开开不了. 疯狂百度一个小时以后,大致产生问题的原因是,LINUX ...

  2. EasyPlayer iOS开源流媒体播放器中AAC解码PCM问题

    本文转自EasyDarwin开源团队成员Penggy的博客:http://www.jianshu.com/p/feeb107b6657 最近遇到在 iOS 平台上实时播放 AAC 音频数据流, 一开始 ...

  3. c# 委托 Predicate的使用示例

    一.说明 委托Predicate 可以有参数(比如下面的示例),也可以不带参数,委托Predicate是返回固定值bool值的委托 二.示例代码(控制台程序) using System; using ...

  4. [自动化平台系列] - 初次使用 Macaca-前端自动化测试(1)

    1. 所先看一下官方地址,了解一下这个是不是你想要的测试工具 https://macacajs.github.io/macaca/environment-setup.html 2. 去掉sudo -- ...

  5. Hadoop安全

    kerberos-hadoop配置常见问题汇总 注意事项 常见问题如下(其中前面两点最多): 各目录属主组属性修改. 对于hadoop,需要改为yarn:hadoop/mapred:hdoop/hdf ...

  6. iOS 判定string是不是中文字符

    +(BOOL)IsChinese:(NSString *)str { ; i< [str length];i++) { int a = [str characterAtIndex:i]; if( ...

  7. LwIP移植uCos+stm32f407

    LwIP同操作系统一起工作的时候模型如下: 1.TCP/IP协议栈和应用程序以分离的任务运行 2.应用同协议栈沟通是通过API函数调用(API函数调用事实上就是通过OS自带的进程间通信机制,由应用程序 ...

  8. PGTM通用性能测试模型

    PTGM通用性能测试模型 一.      测试前期准备阶段 目标: 1. 保证系统稳定性: 2. 建立合适的测试团队. 活动: 1.    系统基础功能验证 类似于BVT测试,确保被测系统已具备进行性 ...

  9. shiro加密简单实现

    1.添加shiro依赖 定义shiro的版本号 <shiro.ver>1.2.3</shiro.ver> 加入shiro的依赖 <dependency> <g ...

  10. 如何在Flask的构架中传递logger给子模块

    Logger的传递 作为一个新手,如何将主函数的logger传入子模块是一件棘手的事情.某些情况下可以直接将logger作为参数传入子模块的构造函数中,但倘若子模块与主模块存在相互依赖的关系则容易出现 ...