水平滚动 dataTables.js

Posted

技术标签:

【中文标题】水平滚动 dataTables.js【英文标题】:Horizontal Scroll dataTables.js 【发布时间】:2014-09-03 05:27:26 【问题描述】:

我很难让水平滚动与 dataTables.js 一起使用。预期的结果是一个允许我在表格内水平滚动的表格。当前结果是一个延伸到容器 div 之外的表格。有什么解决办法吗?

html

<div class="box-body table-responsive">
     <table id="portal-drivers" class="table table-bordered table-striped" cellspacing="0" >
         <thead>
             <tr>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Email</th>
                 <th>Number</th>
                 <th>Rating</th>
                 <th>Transactions</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>Bugs</td>
                 <td>Bunny</td>
                 <td>bugs@tunesquad.com</td>
                 <td>(310) 530-6789</td>
                 <td>4.8</td>
                 <td>309239045293459823945234895</td>
             </tr>
          </tbody>                   
     </table>

CSS:

.table-striped > tbody > tr:nth-child(odd) > td, 
.table-striped > tbody > tr:nth-child(odd) > th 
  white-space: nowrap;

#portal-drivers 
  overflow: auto;

jQuery

$("#portal-drivers").dataTable( 
    "scrollX": true
 );

【问题讨论】:

【参考方案1】:

将“scrollX”更改为“sScrollX”:'100%'

$("#portal-drivers").dataTable( 
    "sScrollX": '100%'
 );

【讨论】:

scrollx 和 sscrollx 有什么区别? 我还发现添加 responsive:false 对我有用。我正在使用 ASP Net Zero,它还向表中添加了一个 dt-responsive 类,应该将其删除。【参考方案2】:

为了使数据表可滚动(标题和正文都),请使用属性sScrollXInnersScrollX,如下所示:

$("#my-demo-datable").dataTable( 
    "sScrollX": "100%",
    "sScrollXInner": "110%",
 );

sScrollXInner 设置为 100% 将允许表格响应并仅在表格溢出时显示滚动条。在 110% 时,它总是会溢出。

【讨论】:

对我来说,将“sScrollXInner”更改为“100”有助于响应式展示。【参考方案3】:

尝试将其放入 CSS 中:

#portal-drivers 
    overflow-x: scroll;
    max-width: 40%;
    display: block;
    white-space: nowrap;

【讨论】:

真的很好用。我还在数据表应用程序中应用了 "sScrollX": '100%' 但标题出现宽度问题。【参考方案4】:

为了让数据表可以滚动,你可以试试这个

$(document).ready(function() 
    $('#example').DataTable( 
        *"scrollY": 200,
        "scrollX": true
     );
 )

【讨论】:

以上是关于水平滚动 dataTables.js的主要内容,如果未能解决你的问题,请参考以下文章

CSS 如何添加水平滚动条

TreeView重绘后 水平滚动条问题

DuiLib怎样控制list不出现水平滚动条

水平 UIScrollView 内部有垂直 UIScrollViews - 滚动外部水平视图时如何防止滚动内部滚动视图?

如何启用垂直滚动的滚动条并禁用水平滚动?

ulli鼠标滚轮水平滚动