jQuery dataTables - 无法获得水平滚动和固定列来完成他们的工作。似乎处处呈现不同。我究竟做错了什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14991545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dataTables - Can't get horizontal scroll & fixed column to do their job. Seems to render differently everywhere. What am I doing wrong?
提问by Biggest
I have spent HOURS trying to figure this out. I need to make a table that is virtually identical to the one that is being displayed at this link:
我花了 HOURS 试图弄清楚这一点。我需要制作一张与此链接中显示的表格几乎相同的表格：
https://datatables.net/extensions/fixedcolumns/
https://datatables.net/extensions/fixedcolumns/
Where it scrolls both vertically and horizontally, while keeping a column fixed to the side. Ultimately, I'd like to have the right column fixed instead of the left, but that's not really my problem at the moment.
它可以垂直和水平滚动，同时保持一列固定在侧面。最终，我希望修复右侧的列而不是左侧的列，但这目前并不是我真正的问题。
My problem is that despite having functional .js, that sorts the columns and pretty much does everything it's supposed to, and even using identical CSS, the middle container - the one that is supposed to horizontally scroll - doesn't. The vertical scroll is working just fine. It's clearly working in the example and the .js is pretty much supposed to handle everything once the table is built. Right now, I just want to get it working before even trying to switch from the left to the right column. If you can help me with that at the same time, all the better, but as I said, not what is currently vital.
我的问题是，尽管具有功能性 .js，它对列进行排序并且几乎可以完成它应该做的所有事情，甚至使用相同的 CSS，中间容器 - 应该水平滚动的容器 - 没有。垂直滚动工作得很好。它在示例中显然有效，一旦构建表，.js 几乎应该可以处理所有内容。现在，我只想在尝试从左列切换到右列之前让它工作。如果你能同时帮助我，那就更好了，但正如我所说，不是目前最重要的。
http://jsfiddle.net/biggest/WCpYx/6/
http://jsfiddle.net/biggest/WCpYx/6/
//jquery
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": false
} );
new FixedColumns( oTable );
} );
//HTML
<div id="container" style="width: 700px;">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox <br>1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A</td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
Here's a jsfiddle to kind of show the problem. Oddly enough, the hoz-scroll actually shows up in this (it's completely absent in my local example), but it still isn't allowing the left (Rendering Engine) Columns to stay put, and extends the entire table, which as you can see in the example link, it should not do.
这是一个 jsfiddle 来显示问题。奇怪的是，hoz-scroll 实际上出现在这个（在我的本地示例中完全没有），但它仍然不允许左侧（渲染引擎）列留在原地，并扩展整个表格，你可以在示例链接中看到，它不应该这样做。
I should also mention that this is being done in a Bootstrap environment and from what I've read so far, dataTables and Bootstrap should work together fairly well. I thought there might be a style somewhere that is disabling the horizontal scroll but I've not yet found any discrepancies.
我还应该提到，这是在 Bootstrap 环境中完成的，从我目前所读到的内容来看，dataTables 和 Bootstrap 应该可以很好地协同工作。我认为某处可能存在禁用水平滚动的样式，但我还没有发现任何差异。
Also, upon further inspection, there is supposed to be a class="DTFC_LeftWrapper" on that far left column that is not showing up in the jsfiddle example, which is probably why the hoz-bar extends all of the way to the left. I don't know why it wouldn't show up there, but does in local files as well as in the example link.
此外，经过进一步检查，应该在最左侧的列上有一个 class="DTFC_LeftWrapper" 没有出现在 jsfiddle 示例中，这可能是 hoz-bar 一直向左延伸的原因。我不知道为什么它不会出现在那里，但会出现在本地文件和示例链接中。
From what I've been able to ascertain, the table within the class="dataTables_scrollBody" isn't extending beyond the div it's encased in class="dataTables_scroll" which also appears to be absent from the jsfiddle version. On the local version, any attempts to force it outside, only widens the width of the div.
据我所知， class="dataTables_scrollBody" 中的表格并没有超出它包含在 class="dataTables_scroll" 中的 div，而 jsfiddle 版本似乎也没有。在本地版本上，任何将其强制到外部的尝试只会加宽 div 的宽度。
I don't know, I'm just trying to give you as much as I can to go on.
我不知道，我只是想尽我所能地给你更多。
Any help with this would be greatly appreciated.
对此的任何帮助将不胜感激。
采纳答案by lukeocom
I think you need to set how many columns are to be fixed in your initializer...
我认为您需要在初始化程序中设置要修复的列数...
new FixedColumns( oTable, {
"iLeftColumns": 0,
"iRightColumns": 1
} );
this info is from http://www.datatables.net/extras/fixedcolumns/options
回答by hlascelles
Thanks @Biggest, your point about bootstrap table widths lead to our solution. In chrome, at least, autodoesn't work, but nonedoes, so we just added this to our .less sheets:
谢谢@Biggest，您关于引导表宽度的观点导致了我们的解决方案。至少在 chrome 中，auto不起作用，但没有一个起作用，所以我们只是将它添加到我们的 .less 表中：
table{
max-width: none
}
回答by Alex Williams
Recent versions of JQuery have deprecated $.browser. Actively developed plugins have included checks to the effect of if($.browser && $.browser.msie))rather than if($.browser.msie)). You can fix your problem, by one of
最新版本的 JQuery 已弃用$.browser. 积极开发的插件已经包括检查if($.browser && $.browser.msie))而不是if($.browser.msie)). 您可以通过以下方式之一解决您的问题
Include $.browserin your project.
Use an older version of JQuery.
Patch FixedColumns.js with $.browser checks like everyone else.
在您的项目中包含$.browser。
使用旧版本的 JQuery。
像其他人一样使用 $.browser 检查修补 FixedColumns.js。
Your jsfiddle works when using an older version of JQuery.
使用旧版本的 JQuery 时，您的 jsfiddle 可以工作。
