迷你音箱淘宝入口:http://item.taobao.com/item.htm?id=13440256831
最近用Jquery datatables Plugin+freemarker+Struts2开发一个数据列表的组件.由于在整个系统要用到这个组件的功能模块所涉及的数据量不大,为了便于直观,统一不做分页,而是通过滚动条来显示超出显示区域的内容。但是datatables本身如果通过overflow: scroll控制是否显示滚动条,在滚动条活动的时候<thead>部分,也就是列头部分也会随之滚动。我们知道在IE下只有div和body标签才会响应overflow: scroll的样式属性。所以试图在<tbody>标签上加overflow: scroll样式是在IE下是不生效的。
下面是我采用的一种解决方法:用一个table A嵌套另外一个table B,A的第一行显示列头(即需要固定不懂的地方),第二行放置一个固定高度的div放置显示数据的table B,table B的<thead>部分(datatables插件必须的用于显示列头,以及控制内容行的每一列的宽度)内容置空,0高度显示。而在实际中这样写也比较麻烦,所以这部分用js动态生成。
CSS:
.scrolltable{height: 350px; overflow-x: hidden; overflow-y: auto; width: 100%;}
#dataTable tbody td{text-align:center;}
JS:
//生成thead部分
function createThead(){
if(columnsCount !='0'){
var ths = $("#ttitle > th");
var tr = document.createElement("tr");
for(i = 0;i<=columnsCount;i++){//第一列为隐藏列用户存放ID
var th = document.createElement("th");
if(i>0){
$(th).attr('width',$(ths[i-1]).attr('width'));
}else{
$(th).css("display","none");
}
tr.appendChild(th);
}
$(tr).height(0);
$(tr).appendTo("#thead");
}
}
// 防止出现滚动条导致标题列和内容列错位
$('#'+ tableElementId).width( $(".scrolltable").width() );
html template:
<#--table template start-->
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="display">
<tr id="ttitle" class="tr1">
<th width="20%">Row id</th>
<th width="20%">Seat id</th>
<th width="20%">Seat Type</th>
<th width="20%">Index/1KG</th>
<th width="20%">Arm(IN)</th>
</tr>
</table>
</div></td>
</tr>
<tr>
<td><div class="scrolltable">
<table width="100%" id="${tableEelementId}" border="0" cellpadding="5" cellspacing="0" class="display">
<thead id="thead"></thead>
<tbody id="tbody"></tbody>
</table>
</div></td>
</tr>
</table>
<#--table template end-->
- 大小: 20.7 KB
分享到:
相关推荐
Jquery dataTables插件 支持静态分页 排序 固定表头 ajax事件 等等 简单易上手
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,包括排序、分页、扩展、主题、国际化等
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下
jquery1.6 datatables插件1.8 附带例子 API等 WEB页面显示列表,课排序 列过滤 隐藏列等功能
DataTables - jQuery表格插件
主要为大家详细介绍了jQuery Datatables表头不对齐的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。 因为方法很简单,就未封装成插件的形式,仅仅以代码...
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
使用JQuery.Datatables再也不用烦恼了,非常方便的集成插件,还是老外牛叉啊!
主要为大家详细介绍了jQuery DataTables插件自定义Ajax分页的相关资料,需要的朋友可以参考下
JQuery DataTables示例,包含分页、拖拽、导出,前端、后台分页都有,项目直接导入就可以使用,项目框架是struts2写Web项目。
jquery 分页插件 dataTables 仅包含demo_table.css,jquery.dataTables.js,jquery.js
官方下载 datatables所需包文件
jQuery Datatables
jquery dataTables两种版本 jquery两种版本 及相关css
NULL 博文链接:https://gcc2ge.iteye.com/blog/2224072
本技巧说明了如何自定义使用jQuery DataTables插件创建的PDF。
本文介绍了如何使用jQuery DataTables插件增强纯HTML表。