dataTables - 无法获得水平滚动和固定列来完成其工作。似乎到处渲染都不同。我究竟做错了什么?

2024-01-27

我花了几个小时试图解决这个问题。我需要制作一张与此链接中显示的表格几乎相同的表格:

https://datatables.net/extensions/fixedcolumns/ https://datatables.net/extensions/fixedcolumns/

它可以垂直和水平滚动,同时保持一列固定在侧面。最终,我希望修复右列而不是左列,但这并不是我目前真正的问题。

我的问题是,尽管有功能性的 .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>

这是一个 jsfiddle 来展示这个问题。奇怪的是,水平滚动实际上出现在这个(在我的本地示例中完全不存在),但它仍然不允许左侧(渲染引擎)列保持原样,并扩展整个表格,您可以这样做请参阅示例链接,它不应该这样做。

我还应该提到,这是在 Bootstrap 环境中完成的,从我到目前为止所读到的内容来看,dataTables 和 Bootstrap 应该可以很好地协同工作。我认为某个地方可能有一种样式禁用水平滚动,但我还没有发现任何差异。

另外,经过进一步检查,最左边的列上应该有一个 class="DTFC_LeftWrapper",该列没有出现在 jsfiddle 示例中,这可能就是 hoz-bar 一直向左延伸的原因。我不知道为什么它不会出现在那里,但会出现在本地文件以及示例链接中。

据我所知,class =“dataTables_scrollBody”中的表没有超出它包含在class =“dataTables_scroll”中的div,而jsfiddle版本中似乎也没有该表。在本地版本上,任何将其强制到外部的尝试都只会加宽 div 的宽度。

我不知道,我只是想给你尽可能多的帮助,让你继续下去。

任何对此的帮助将不胜感激。


我认为您需要设置在初始化程序中要修复多少列......

new FixedColumns( oTable, {
      "iLeftColumns": 0,
      "iRightColumns": 1
    } );

此信息来自http://www.datatables.net/extras/fixedcolumns/options http://www.datatables.net/extras/fixedcolumns/options

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

dataTables - 无法获得水平滚动和固定列来完成其工作。似乎到处渲染都不同。我究竟做错了什么? 的相关文章

随机推荐

  • Google Charts 次轴折线图

    我目前正在学习一些带有网络编辑的谷歌图表 以扩大我的知识 但我遇到了一个无法解决的问题
  • Select2 v4 无法使用 Tab 键进入,按 Enter 键,然后选择,使用 Firefox(又称无鼠标访问)

    I am currently unable to tab into a Select2 enabled
  • 动画 UICollectionView 标题高度变化

    我目前正在使用带有标题的 UICollectionView 并且想知道如何在需要时设置动画并扩展标题高度 我正在尝试模拟 iPhone 版 Expedia 应用程序中的功能 点击图像会展开标题单元格以显示中心的图像 我已经尝试这个有一段时间
  • Gmail API 批量获得支持吗?

    我正在使用 Gmail API 进行 WEB HTTP 调用 有没有办法批量获取消息内容 看来messages list只返回messageIds messages get只支持单条消息查询 列表API https www googleap
  • 检查 Silverlight 中的互联网连接

    我正在编写一个 Silverlight 4 应用程序 并想在打开已安装的浏览器外应用程序时检查是否存在有效的互联网连接 然后从我的网站下载一些数据 做这个的最好方式是什么 我意识到我可以在 WebRequest 周围放置一个 try cat
  • 使用 jQuery 更改 Chosen.js 选择框的值

    我正在尝试更改选择框的值选择 js http harvesthq github com chosen 覆盖 这个想法是当用户单击按钮时更改所选值 使用常规选择框 我可以通过执行以下操作来更改值 GroupsShowNext unbind c
  • 在 SqlCommand 中使用参数删除

    我使用 ADO NET 从数据库中删除一些数据 如下所示 using SqlConnection conn new SqlConnection connectionString try conn Open using SqlCommand
  • knitr kable:RNW 的 PDF 中的文本颜色为灰色

    当我使用创建表时knitr kableRNW 文件中的函数 PDF 中表格项目的文本颜色显示为灰色 我想把它改成黑色 我怎样才能做到这一点 documentclass article begin document lt lt gt gt k
  • “and”如何与奇数和偶数相关?在JS中

    我的任务是弄清楚如何确定奇数和偶数 我无法使用 我使用 是因为我在互联网上找到了它 但我找不到适合它工作方式的方法 N A 我创建的样本是 if 22 1 0 return true else return false 返回真 按位运算符的
  • 动态嵌套 React.js 组件

    我想创建一个灵活 动态可以使用 React js 呈现的 JSX 表单格式 此格式必须包含嵌套组 一个组可以包含其他组以及问题 var Group React createClass render function return field
  • 如何从 Datareader 获取多行

    这是我的代码 它工作正常 但只返回一行 正如您在 SQL 语句中看到的 我需要在表单中使用的数据网格中返回 2 行 虽然该过程读取 2 行 但它只显示一行 NameAddrmark 是字段的构造函数 public NameAddrmark
  • 向用户发送激活电子邮件

    我该如何检查电子邮件是否确实存在 无法理解明星如何发送带有唯一链接的邮件 用户单击该链接以验证他是电子邮件的所有者 创建 2 个名为激活密钥的新列 并激活并存储一些随机字符串 发送包含激活密钥的电子邮件 并更新与该激活链接匹配的用户已激活
  • 在特定时间和日期调用 iOS 应用程序

    我希望我的 iOS 应用程序能够准确无误地知道特定日期和时间何时到达 现在这个时间可能是几天 几周 几个月 我的应用程序可能处于 backgorund 或终止状态 所以有以下几种选择 A 本地通知 但当我的应用程序处于后台时它不会通知 b
  • Chrome 中的 CSS 动画棘手错误

    我有以下 CSS webkit keyframes fade out from opacity 1 to opacity 0 webkit keyframes fade in from opacity 0 to opacity 1 intr
  • 如何避免Core Motion控制的SceneKit相机滚动?

    我正在将 SceneKit 相机设置为当前CMDeviceMotion使用的态度CMDeviceMotion 扩展 https gist github com travisnewby 96ee1ac2bc2002f1d480在此描述的ans
  • Google Analytics 报告大量 Internet Explorer 7 流量

    对于我们的网站 Google Analytics 报告的 Internet Explorer 7 用户数量过高 40 当我们进一步深入研究数据时 我们发现大部分 IE7 点击量都来自 Windows 7 等较新的操作系统 而 IE7 从来都
  • 带有生成列的 PostgreSQL 查询

    我有一个如下所示的架构 我想运行一个查询 在输出中为每一行获取一列points table 所以对于每个usage我想乘以行amount使用次数的amount对于引用的points id 然后总结并按人分组 因此 对于示例数据 我希望输出如
  • 如何在 Gluon Mobile 中将 RoboVM 编译器版本更改为 2.3.10-SNAPSHOT

    我在 iPadOS 13 3 上运行 JavaFX Gluon 移动应用程序时遇到问题实际上 这里描述了类似的问题 Gluon 示例应用程序在 iOS 设备上失败 https stackoverflow com questions 5938
  • python 从列表中选择特定元素

    是否有一种 Pythonic 方法可以从列表中仅获取某些值 类似于此 perl 代码 my one four ten line split 1 4 10 使用列表理解 line 0 1 2 3 4 5 6 7 8 9 10 lst line
  • dataTables - 无法获得水平滚动和固定列来完成其工作。似乎到处渲染都不同。我究竟做错了什么?

    我花了几个小时试图解决这个问题 我需要制作一张与此链接中显示的表格几乎相同的表格 https datatables net extensions fixedcolumns https datatables net extensions fi