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" 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-->