2

将数据表与 jquery mobile 一起使用时，我似乎无法获得水平滚动条。我已经尝试了我能想到的 sScrollX 和 sScrollY 的所有组合。

要查看缺少垂直滚动条的示例，请尝试我在此处放置的 webapp 示例。

在 iphone 或其他一些小屏幕上尝试以下操作：

1）将滑块从图表切换到表 2）点击收藏夹按钮 3）向下滚动左侧面板并选择“MSFT”。

您只会看到前几列。您可以上下滚动，但不能向右滚动。

我尝试了 sScrollX 和 sScrollY 但滚动不一致且有问题。目前我已经禁用了两者，至少垂直滚动可以正常工作。

任何帮助将不胜感激，因为我已经为此奋斗了一周！

请在下面找到当前的数据表代码：

 var table = $('#table_container').dataTable( {
        "symbol": symbol,
        "exchange": exchange,
        "aoColumns": columnData,
        "aoColumnDefs": [
        { "aTargets": [0],      "mRender": function (data, type, full) {return dateFormat(data)} },
        { "aTargets": [1],      "mRender": function (data, type, full) {return volumeNumber(data)} },
        { "aTargets": [8],      "mRender": function (data, type, full) {return volumeNumber(data)} },
        { "aTargets": [14],      "mRender": function (data, type, full) {return volumeNumber(data)} },                           
        { "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
        ],
        "aaSorting": [[ 0, "desc" ]],
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bProcessing": true,
        //"sScrollX": "100%",
        //"sScrollY": "100%",
        //"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',                        
        "bScrollCollapse": false,
        "bServerSide": true,
        "sAjaxSource": str,
        "bDeferRender": true,
        "fnServerData": function( sUrl, aoData, fnCallback ) {
            $.ajax( {
                "url": sUrl,
                "data": aoData,
                "success": fnCallback,
                "dataType": "jsonp",
                "cache": false
            } );
        }
    } );
4

3 回答 3

5

像这样试试

$(document).ready(function() {
    $('#example').dataTable( {
        "sScrollX": "100%",
        "sScrollXInner": "110%",
        "bScrollCollapse": true
    } );
} );

参考这个小提琴演示

于 2014-04-10T06:06:05.000 回答
1

将表格包裹在一个 div 中。

您可以将溢出值设置为自动。

<div class="table-container">
  <table>
    ...
  </table>
</div>

CSS

.table-container{
  overflow: auto
}

另一种方法是将溢出设置为隐藏，然后将溢出-x（水平滚动）设置为滚动。这样做的好处是还允许您将 -webkit-overflow-scrolling 设置为 touch，这将允许在移动设备上进行动量滚动。

CSS

.table-container{
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
于 2014-04-10T03:49:21.623 回答
1

我已经从您提供的链接中检查了您的应用程序的 CSS。

要让表格在任何方向独立滚动，您需要在.dataTables_wrapper类中设置所需的宽度和高度。垂直滚动在您的 APP 中有效，因为表格实际上并没有滚动，而是整个页面滚动。如果您的APP在表格下方没有任何其他内容，那么表格高度可以一直设置到页面底部，否则您需要在底部有一个小间隙，以便用户可以触摸并向下滚动这页纸。此外，如果您将应用程序瞄准不同的手机，那么您需要一些 jquery 代码来计算屏幕大小并更新.dataTables_wrapper中的宽度和高度即时上课，以便表格从左右到底部都适合屏幕。如果表格内容长于大小，则将滚动任何多余的宽度和高度。如果 APP 仅适用于一部手机，那么它很容易在类中使用宽度和高度来获得所需的桌子大小。

例子 

 .dataTables_wrapper {
  position: relative;
  clear: both;
  height: 400px;
  width: 400px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  }

你的main_container css 应该是这样的，所以删除其余的。否则，您将有另一个不执行任何操作的水平滚动条。

  #main_container {
  overflow: hidden;
  }

尽管与桌面浏览器不同，滚动条通常对移动浏览器隐藏，但如果您想添加此 css 技巧以将它们隐藏起来。此技巧仅适用于 webkit 浏览器，例如 Google/Safari/Native Android 等。

  ::-webkit-scrollbar {
   width: 0px;
   }

拥有固定表头可能是个好主意，这样人们可以在滚动时看到与列相关的数据。有很多方法可以实现这一点，下面我添加了一个我找到的链接

http://fixedheadertable.com/

于 2014-04-12T08:07:13.317 回答