响应式表格jQuery插件 – Responsive tables | 设计达人
爱设计，爱分享。
响应式表格jQuery插件 – Responsive tables
赞助商链接
这个Responsive tables jQuery插件依赖于Bootstrap 3使用，比BS自带的自适应多了一些好用的功能，比如筛选显示，Focus选定、Table头滑动固定等，下来看看介绍。
文章目录：
1.Responsive tables介绍
Demo地址：
注：这个jQuery插件要在Bootstrap 3前端框架上使用。
1.自定义显示表格列，在表格右上角可以看到，点Display all则显示全部。
另外我最喜欢的就是这个data-priority=”"属性，它可以定义数据在特定分辨率显示或者隐藏掉，类似Bootstrap的class=”col-md/col-lg”栅格技巧，具体请看使用教程。
2.Table头部Fixed定位，当你向下滑动时，Table头部会自动固定在顶部。有点像scroll to fixed的jQuery功能。
3.Focus选中状态，点击Focus按钮开启，然后你试试点击某行表格数据，你会看到你选中的一行表格会高亮显示，而其它数据则变灰了。
2.Responsive tables使用教程
Step1: CSS样式表
在HTML头部引入这个插件的样式表
&link rel=&stylesheet& href=&css/rwd-table.min.css&&
把JS添加到&head&前或&body&…&/body&里面
&script type=&text/javascript& src=&js/rwd-table.js&&&/script&
$(function() {
$('.table-complex').responsiveTable({
adddisplayallbtn: true,
addfocusbtn: true,
fixednavbar: '#navbar'//In case you have a fixed navbar.
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&&
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 以下可见
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
印刷工艺必备神技
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群bootstrap-table&案例
最近接触一个NB插件，&没做过前端的表示对table的印象还只停留在html的table标签那一套，用过bootstrap
table之后不得不说真是牛X。
&&/SPAN&div class="btn-group hidden-xs"id="exampleTableEventsToolbar" &
//定义一系列工具栏...
&&/SPAN&/div&
&&/SPAN&table data-toggle="table"
data-url="${ctxAdmin}/user/userData?orgId=${orgId}" //table数据来源，json格式
data-pagination="true"
//是否支持分页
data-show-search="true" //是否显示搜索框功能
data-show-columns="true" //显示columns功能按钮
data-icon-size="outline"
data-mobile-responsive="true"
data-height="500"
id="tablelist"
data-side-pagination="server"
//支持服务器端分页，默认是client&
&&/SPAN&thead&
&&/SPAN&tr&
&&/SPAN&th data-field="user_id"&ID&&/SPAN&/th&
&&/SPAN&th data-field="username"
data-formatter="usernameFormatter" //columns option 参见官网解释
data-events="usernameEvents"&用户名&&/SPAN&/th&
&&/SPAN&th data-field="real_name"&真实姓名&&/SPAN&/th&
&&/SPAN&th data-field="tel_num"&座机&&/SPAN&/th&
&&/SPAN&th data-field="mobile"&手机&&/SPAN&/th&
&&/SPAN&th data-field="user_type"&用户类型&&/SPAN&/th&
&&/SPAN&th data-field="operation"
data-formatter="actionFormatter"
data-events="actionEvents"&操作&&/SPAN&/th&
&&/SPAN&/tr&
&&/SPAN&/thead&
&&/SPAN&/table&
2 、 js构造：
(function() {
$('#tablelist').bootstrapTable({
url: "${ctxAdmin}/user/userData?orgId=${orgId}",
search: true,
//是否显示搜索框功能
pagination: true,
//是否分页
showRefresh: true, //是否显示刷新功能
showToggle: true,
showColumns: true,
iconSize: 'outline',
// toolbar: '#exampleTableEventsToolbar', 可以在table上方显示的一条工具栏，
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
结合官网上展示的Table options，Column
options，Events，Methods可以完成很多功能。上面的data-formatter
，data-events就是Column options中的选项 。
data-formatter 和
data-events
要实现如下效果，用上面两个option配合使用即可，一个定义格式，一个定义点击的操作。&
直接上js代码
//value: 所在collumn的当前显示值，
//row:整个行的数据 ，对象化，可通过.获取
//表格-操作 - 格式化
function actionFormatter(value, row, index) {
return '" &修改 ' + '"&删除';
- 操作 - 事件
window.actionEvents = {
'click .mod': function(e, value, row, index) {
//修改操作
'click .delete' : function(e, value, row, index) {
//删除操作
服务器分页/客户端分页的转换，table刷新
bootstrap默认是客户端分页 ，可通过html标签
data-side-pagination:"client"
或者js中的
sidePagination: 'server'
指定。注意，这两种后台传过来的json数据格式也不一样&
client : 正常的json array格式
[{},{},{}]&
server： {“total”:0,”rows”:[]}
其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。
有事需要根据情况改变分页方式，就要用到Methods中的&
‘refreshOptions’
//设置更新时候的options&
‘refresh’ //设置更新时的 url ,query(往后台传参数)
$("#tablelist").bootstrapTable('refreshOptions', {
sidePagination: 'client'
//改为客户端分页
$("#tablelist").bootstrapTable('refresh', {
url: "${ctxAdmin}/user/getsearchuserinfo", //重设数据来源
query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}//传到后台的参数
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。bootstrap中固定table的表头 - 推酷
bootstrap中固定table的表头
前端时间鼓捣的一个简单的手机网站，今天又拿出来弄一弄
因为主要是给手机访问，用的是bootstrap响应式布局，今天的任务是做一个数据展示页面
但是由于数据的列比较多，所以横向显示不下，为了较好的显示，将table包裹在了一个 .table-responsive 元素里
那么在较小的视口（viewport）时，则可以通过滑动来查看整条数据，从而能保证整体页面的协调性。
刚才说了，数据列比较多，且第一列是后面数据的所有者，那么观察者在看数据的时候肯定是要对应着数据所有者来看的，那么问题来了
若是滑动到后面，那么很容易忘记本条的所有者，那是相当不方便的！比如我们在看NBA比赛数据的时候，有很多项统计（也就是很多列）
第一列显示的是名字，那么随着我们往后滑动，会出现这样的结果:
这样我们根本不知道数据对应的人是谁！哎~怎么办呢？
一般的方法都是将“所有者”一列固定下来，滑动时仅滑动后面的列。
不过之前用这个功能都是在前端框架中封装好了的，比如easyUI中有frozen columns，但是在bootstrap中倒是没用过（它本身也没提供这个）
那么自己写一个吧~也没什么思路，之后终于想到一种“非主流”一点的方法：用2个table
左边的table用来显示固定信息，而右边的table用来滑动看数据
实现起来比较简单，将几个要点：
1、使用float:left来将2个table排列到一行上，但是两者和起来的width不能超过总width
2、注意2个table单元格的对齐
最后实现的效果如下：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致[HTML5] Bootstrap_排版_表格 | IT知识库
-& 正文阅读
[HTML5]Bootstrap_排版_表格
Bootstrap_排版_表格
一、基础表格
&table class="table"&
&th&表格标题&/th&
&th&表格标题&/th&
&th&表格标题&/th&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&/table&基础表格
&在Bootstrap中，对于基础表格是通过类名&.table&来控制。&.table&主要有三个作用：&&? &给表格设置了margin-bottom:20px以及设置单元内距&&? &在thead底部设置了一个2px的浅灰实线&&? &每个单元格顶部设置了一个1px的浅灰实线二、斑马线表格
&table class="table table-striped"&
&th&表格标题&/th&
&th&表格标题&/th&
&th&表格标题&/th&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&/table&斑马线表格
在Bootstrap中实现这种表格效果并不困难，只需要在&table class="table"&的基础上增加类名&.table-striped&即可。其效果与基础表格相比，仅是在tbody隔行有一个浅灰色的背景色。三、带边框表格
&table class="table table-bordered"&
&th&表格标题&/th&
&th&表格标题&/th&
&th&表格标题&/th&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&/table&带边框表格&
在Bootstrap中实现这种表格效果并不困难，只需要在&table class="table"&的基础上增加类名&.table-bordered&即可：四、鼠标悬浮高亮表格
&table class="table table-hover"&
&th&表格标题&/th&
&th&表格标题&/th&
&th&表格标题&/th&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&/table&鼠标悬浮高亮&
鼠标悬停高亮的表格使用也简单，仅需要&table class="table"&元素上添加类名&.table-hover&即可：五、紧凑型表格
&table class="table table-condensed"&
&th&表格标题&/th&
&th&表格标题&/th&
&th&表格标题&/th&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&/table&紧凑型表格&
何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。紧凑型表格的运用，也只是需要在&table class="table"&基础上添加类名&.table-condensed&：六、响应式表格
&div class="table-responsive"&
&table class="table table-bordered"&
&th&表格标题&/th&
&th&表格标题&/th&
&th&表格标题&/th&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
&td&表格单元格&/td&
Bootstrap提供了一个容器，并且此容器设置类名&.table-responsive&,此容器就具有响应式效果，然后将&table class="table"&置于这个容器当中，这样表格也就具有响应式效果。Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。七、表格行的类　　Bootstrap还为表格的行元素&tr&提供了五种不同的类名，每种类名控制了行的不同背景颜色，具体说明如下表所示：
&table class="table table-bordered"&
&th&类名&/th&
&th&描述&/th&
&tr class="active"&
&td&.active&/td&
&td&表示当前活动的信息&/td&
&tr class="success"&
&td&.success&/td&
&td&表示成功或者正确的行为&/td&
&tr class="info"&
&td&.info&/td&
&td&表示中立的信息或行为&/td&
&tr class="warning"&
&td&.warning&/td&
&td&表示警告，需要特别注意&/td&
&tr class="danger"&
&td&.danger&/td&
&td&表示危险或者可能是错误的行为&/td&
&/table&表格行的类&
加: 23:53:52&
更: 15:29:41&
&&网站联系: qq: email:&System ErrorThere appears to be an error:Application error
Message: Got error 28 from storage engine
Build: 3.0 Dev 40912
PHP Version: 5.5.9-1ubuntu4.21
User Agent: Mozilla/4.0 ( MSIE 8.0; Windows NT 6.0; Trident/4.0)
exception 'Zend_Db_Adapter_Mysqli_Exception' with message 'Got error 28 from storage engine' in /data/site//system/Zend/Db/Adapter/Mysqli.php:204
Stack trace:
#0 /data/site//system/Zend/Db/Table/Abstract.php(836): Zend_Db_Adapter_Mysqli-&describeTable('sessions', NULL)
#1 /data/site//system/Zend/Db/Table/Abstract.php(858): Zend_Db_Table_Abstract-&_setupMetadata()
#2 /data/site//system/Zend/Db/Table/Abstract.php(898): Zend_Db_Table_Abstract-&_getCols()
#3 /data/site//system/Zend/Session/SaveHandler/DbTable.php(519): Zend_Db_Table_Abstract-&_setupPrimaryKey()
#4 /data/site//system/Zend/Session/SaveHandler/DbTable.php(318): Zend_Session_SaveHandler_DbTable-&_getPrimary('luquokbluip1d5i...')
#5 [internal function]: Zend_Session_SaveHandler_DbTable-&read('luquokbluip1d5i...')
#6 /data/site//system/Zend/Session.php(482): session_start()
#7 /data/site//system/aws_app.inc.php(146): Zend_Session::start()
#8 /data/site//system/aws_app.inc.php(55): AWS_APP::init()
#9 /data/site//index.php(23): AWS_APP::run()
#10 {main}If you are seeing this page, it means there was a problem communicating with our database.
Sometimes this error is temporary and will go away when you refresh the page.Sometimes the error will need to be fixed by an administrator before the site will become accessible again.You can try to refresh the page by clicking}