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

来源：互联网发布：java语言自学编辑：程序博客网时间：2024/06/05 04:29

最近用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-->

0 0