关于初步接触dataTables处理问题的总结

这几天从同事那接手了dataTables表格的工作，由于表格存在很多bug，所以我接着修改，因为之前没有接触过，所以是在边做边学。记录下来这篇文章主要是想整理一下自己的思路和留给自己以后继续学习，一下说的东西不一定适合每一个环境，如有读者请注意自己的环境。

1、datatables加载数量过多会使显示速度太慢，它有很多参数可以设置，可以使用分页加载（设置bPaginate为true，iDisplayLength设置列数，bLengthChange可开启下拉菜单选择列数）

$(document).ready(function() {
$('#example').dataTable( {
"bPaginate" : true,
"iDisplayLength":15
} );
} );

2、在dataTable([...])里面可以设置很多参数和回调方法，参数用来设置表格的属性，回调则是对表格的一些操作，下面提到的使用参数都是在这里面写。接上段使用了分页就牵涉到行id的问题，id在排序或者分页的时候总是不对，这时候可以在行回调的时候把返回的当前行数据里的id附到行上

3、表格字段列太多的话会很挤，同时会出现很严重的换行现象，导致样式很难看，这时候可以考虑加x轴滚动条（设置sScrollX为true），一般加滚动条的时候会配合另一个参数bScrollCollapse一起使用，这个参数是使数据高度不够支撑表格高度时自动适应高度

4、滚动条怎么加，sScrollXInner（该参数一般设置百分比，如sScrollXInner:"150%"）参数可以强制设置一个宽度，有个问题datatables设置sScrollX参数为true的时候，无论页面多宽都会出现滚动条，但是如果你的各页面列数差距较大的话很难设置，你会希望列少的不出先滚动条，列多的加上滚动条，并且是一个合适的宽度

5、这里我也是用了一个取巧的办法，我的表头是动态从数据库里取的，然后绘制，在设置属性的时候我根据每一列的字数给出相应的宽度，而且会稍微给宽一点，这样起码保证了表头的宽度，能撑起整个表格宽度，这时候加上滚动条就刚好了，但是列数少的不能加，所以我又做了一个认为的处理，在绘制之前我先算出当前页面的列数，平均一下多少列的时候给加上滚动条及需要计算宽度，这样就能勉强达到预期效果了（但是可用性不强，做得太死太投机了）

6、横向滚动条是加上了，但是还有一个新问题，我使用的工具栏（oTableTools），这个参数应该需要设置sDom这个参数，但是这参数我觉得不太好设置。问题就在这加上滚动条之后工具栏跑到表头和数据中间来了，查了先页面发现原来，datatables给建立了好几个table，表头和数量不在一个table了，这个问题我也不太清楚原来，但是我将sDom参数的值由'<"top"i>rtT<"clear">lfrtip'改成了'T<"clear">lfrtip'就正常显示了，关于sDom参数的赋值在dataTables参数文档上面有具体的介绍，至于我给的这值是从网上找的。

7、就当我用Chrome开心的运行以为解决了加载速度、行id、列过多、滚动宽度以及工具栏的时候，看了下IE（我用的IE9）瞬间又崩溃了，在IE下面有滚动条的页面只要鼠标在数量行上滑动就会无限增加行数，看清楚是无限，都是空行，太恶心了

8、于是我又接着研究，这个问题如何去处理，我发现当设置了Y轴滚动（sScrollY）条之后就不会出现这个问题了，纵向滚动条不能随便给宽度，于是我给了个100%，问题又来了，设置完我发现行数少的页面都挤到一块了，根本就不足够显示，我又把bScrollCollapse（高度自适应）参数设置为false，果然可以了。

9、加上纵向滚动之后，发现列数少，没有使用计算的页面，表格的表头和数据列是错位的，数据列会往后移动一点，在html文件的table标签上设置上margin-left:0，就可以对其，但是后面还会出现一点留白，目前还没解决掉。