Jquery datatables插件兑现表头固定内容可滚动列表

Jquery datatables插件实现表头固定内容可滚动列表

迷你音箱淘宝入口：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" id="${tableEelementId}"  border="0" cellpadding="5" cellspacing="0" alt="Jquery datatables插件兑现表头固定内容可滚动列表">
?