本文转自：http://www.shejidaren.com/responsive-tables-for-bootstrap-3.html

这个Responsive tables jQuery插件依赖于Bootstrap 3使用，比BS自带的自适应多了一些好用的功能，比如筛选显示，Focus选定、Table头滑动固定等，下来看看介绍。

<img alt="响应式表格jQuery插件 - Responsive tables" src="http://images.shejidaren.com/wp-content/uploads/2014/04/075953Oq4.png" width="500" />

文章目录：

  1. Responsive tables介绍
  2. Responsive tables使用教程

1.Responsive tables介绍

Demo地址：http://gergeo.se/RWD-Table-Patterns/#demo

注：这个jQuery插件要在Bootstrap 3前端框架上使用。

1.自定义显示表格列，在表格右上角可以看到，点Display all则显示全部。

另外我最喜欢的就是这个data-priority=”"属性，它可以定义数据在特定分辨率显示或者隐藏掉，类似Bootstrap的class=”col-md/col-lg”栅格技巧，具体请看使用教程。

<img alt="响应式表格jQuery插件" src="http://images.shejidaren.com/wp-content/uploads/2014/04/0759533m9.png" width="501" />

2.Table头部Fixed定位，当你向下滑动时，Table头部会自动固定在顶部。有点像scroll to fixed的jQuery功能。

<img alt="jQuery插件" src="http://images.shejidaren.com/wp-content/uploads/2014/04/075953hZA.png" width="500" />

3.Focus选中状态，点击Focus按钮开启，然后你试试点击某行表格数据，你会看到你选中的一行表格会高亮显示，而其它数据则变灰了。

<img alt="响应式表格jQuery插件" src="http://images.shejidaren.com/wp-content/uploads/2014/04/075953srl.png" width="500" />

2.Responsive tables使用教程

Step1: CSS样式表

在HTML头部引入这个插件的样式表

<head>

...

<link rel="stylesheet" href="css/rwd-table.min.css">

</head>

Step2: js

把JS添加到<head>前或<body>…</body>里面

<body>

...

<script type="text/javascript" src="js/rwd-table.js"></script>

<script>

$(function() {

$('.table-complex').responsiveTable({

adddisplayallbtn: true,

addfocusbtn: true,

fixednavbar: '#navbar'//In case you have a fixed navbar.

})

});

</script>

</body>

Step3: IE兼容

<!--[if lt IE 7 ]> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7 ]>    <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8 ]>    <html lang="en" class="no-js lt-ie10 lt-ie9"> <![endif]-->

<!--[if IE 9 ]>    <html lang="en" class="no-js lt-ie10"> <![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Step4: HTML

Bootstrap的响应式表格要在table外面添加一个<div class=”table-responsive”>。

<div class="table-responsive">

<table id="example-table" class="table table-complex table-bordered table-striped">

...

</table>

</div>

Step5: 配置Table

通过data-priority属性可以定义表格列在不同屏分辨显示与隐藏，这个属性请设置在<th data-priority=”">上。

data-priority=”" 总是可见的，不会出现在右上角的筛选下拉列表。 data-priority=”1″ 保持可见，但可以在下拉列表筛选隐藏。 data-priority=”2″ 480px 分辨率以下可见 data-priority=”3″ 640px 以下可见 data-priority=”4″ 800px 以下可见 data-priority=”5″ 960px 以下可见 data-priority=”6″ 1120px 以下可见

插件下载地址：Github | 在线DEMO

[转]响应式表格jQuery插件 – Responsive tables的更多相关文章

  1. FooTable高级的响应式表格jQuery插件

    FooTable是一个高级jQuery插件,允许开发者在触屏智能手机及平板电脑等小型设备上制作数据非常惊人的HTML表格.它可以将HTML表转换成可扩展的响应式表格,且通过单击某一行即可将该行数据隐藏 ...

  2. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  3. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  4. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  5. 12款响应式的 jQuery 旋转木马（传送带）插件

    在企业网站,作品集网站,电子商务网站或任何其他类型的网站内容显示图片可以使用 jQuery 旋转木马(传送带)插件来实现. jQuery 旋转木马插件允许开发人员以水平或垂直的方式显示内容,视频和图像 ...

  6. 15 个响应式的 jQuery 图像滑块插件

    设计师和开发人员总是试图使用新技术让网站更智能,而我们发现在许多网站上 jQuery 的图像滑块插件是非常受欢迎的.本文继续介绍 15 个 jQuery 图像滑块插件以供您选择. ELASTISLID ...

  7. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  8. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  9. 响应式瀑布流插件Grid-A-Licious

    Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度, ...

随机推荐

  1. 使用栈Stack对整数数值的运算表达式字符串进行运算C#

    这里如果对于形如字符串“((6+((7+8)-9)*9+8/2)-3)/2”的运算表达式进行运算.接触过此类的同学知道这种存在着运算符优先级的表达式,不能直接从左到右进行运算,我们使用OperandS ...

  2. 重新想象 Windows 8.1 Store Apps (82) - 绑定: DataContextChanged, TargetNullValue, FallbackValue, UpdateSourceTrigger

    [源码下载] 重新想象 Windows 8.1 Store Apps (82) - 绑定: DataContextChanged, TargetNullValue, FallbackValue, Up ...

  3. MyBatis的一些基本操作

    在学校里只学过一点点的hibernate基础,但是这几天被熊哥叫去写好几个类的接口,所以就去百度了一下mybatis的接口方式怎么使用.1定义接口,并且定义其中要使用到的方法,这里必须注意到的是方法名 ...

  4. 解决My eclipse 工程发布时端口占用问题

    如果运行后如图的错,需要进行如下操作来解决: a:打开cmd,输入netstat -ano 找到本地地址为8080的最后一项的数字,这个数字就是端口号. b:再输入taskkill /t /pid 端 ...

  5. HTML5的新特性

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.footer. ...

  6. 基于 ANSIBLE 自动化运维实践

    摘要:运维这个话题很痛苦,你做任何的产品都离不开运维.不管你用什么语言.什么平台.什么技术,真正能够决定你产品成熟度的很有可能就是你运维的能力.取自 云巴 CEO 张虎在 ECUG 大会上的分享. 云 ...

  7. C#中的接口实现多态

    我们都知道虚方法实现多态,抽象方法实现多态等,我们今天来看看如何使用接口实现多态 1.首先我们先要来了解了解什么是接口,它存在的意识 01.接口就是为了约束方法的格式(参数和返回值类型)而存在的 02 ...

  8. IOS网络编请求响应之URL结构

    资料均来自互联网,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. 人魔七七:http://www.cnblogs.com/qiqibo/ 对于我们IOS开发者来说 ...

  9. css百宝箱

    关于css百宝箱? 在前端学习中,总会遇到零星的知识点,小技巧,这些知识点小到不至于用一片博客写出来,遇到时网上查询一下或许也能搞定,但不一定能记住,所以这篇博客就用来记录那些散落的知识点,积少成多, ...

  10. 微信公共平台开发5 .net

    每次在于微信交互时,都要用到access_token,但是这个值限制的是有时间的,但是access_token,在以后的高级功能里面会经常用到,所以这里不得不这里对前面所讲解的access_token ...