jQuery DataTables插件的sScrollX和sScrollY属性

原始的HTML代码如下:

Column 2
        
Column 1
AAA BBB

 

DataTables插件,如果初始化时设置了sScrollX或者sScrollY属性,那么表格组件初始化之后,页面会生成两个

。如果不设置这两个属性,则只会有一个
生成。

第一个table里面,只有

部分,这个就是页面看到的表格的表头。这个table的class是my-class,没有id。

第二个table里面,id是myTable,class是my-class。这个table含有

和,这个thead里面是空的,据我推测应该是用来让表格的列宽与表头的列宽相等的。里面是页面看到的表格数据。这个table的空,会导致页面中看到的表格,表头和表体之间有条很粗的线,但是我们又不能将这个空thead设置成display: none;,这样会导致在IE下表格显示错位。目前还没有找到好方法。

 

另外,如果在原始的html代码中使用了

,那么组件初始化之后,还会多生成一个table,这个table的class是my-class。它里面只有,这个就是页面看到的表格的tfoot部分。

 

sScrollX属性还起到了设置表格宽度的作用。假如表格原来有10列,可以100%充满整个窗口。在初始化表格时,通过aoColumns参数,隐藏了7列,如果不设置sScrollX为100%,那么表格只有这3列宽,不会充满窗口,如果设置了sScrollX : '100%',则可以让表格的宽仍然可以充满整个窗口。

你可能感兴趣的:(jQuery,jQuery,plugins)