2

jquery mobile で datatables を使用すると、水平スクローラーが動作しないようです。考えられる sScrollX と sScrollY のすべての組み合わせを試しました。

垂直スクローラーがない例を確認するには、ここに掲載した webapp の例を試してください。

iPhone またはその他の小さな画面で、次のことを試してください。

1) スライダーを Graph から Table に切り替えます。 2) お気に入りボタンをクリックします。 3) 左パネルを下にスクロールし、[MSFT] を選択します。

最初の数列のみが表示されます。上下にスクロールできますが、右にはスクロールできません。

sScrollX と sScrollY を試しましたが、スクロールに一貫性がなく、バグがあります。現時点では、両方を無効にしましたが、少なくとも垂直スクロールは問題なく動作します。

私は今これを1週間戦っているので、どんな助けも大歓迎です！

以下の現在のデータテーブルコードを見つけてください。

 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

1

テーブルを div で囲みます。

オーバーフロー値を auto に設定できます。

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

CSS

.table-container{
  overflow: auto
}

もう 1 つの方法は、overflow を非表示に設定してから、overflow-x (水平スクロール) を scroll に設定することです。これには、-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クラスで必要な幅と高さを設定する必要があります。テーブル自体は実際にはスクロールしていませんが、ページ全体がスクロールしているため、アプリで垂直スクロールが機能します。アプリがテーブルの下に他のコンテンツを持たない場合は、テーブルの高さをページの一番下まで設定できます。そうでない場合は、ユーザーがタッチしてさらに下にスクロールできるように、下部に小さなギャップを設ける必要があります。ページ。また、さまざまなモバイルでアプリを対象としている場合は、画面サイズを計算し、.dataTables_wrapperで幅と高さを更新するための jquery コードが必要です。オンザフライでクラスを作成して、テーブルが左右から下まで画面に収まるようにします。テーブルの内容がサイズよりも長い場合、余分な幅と高さがスクロールされます。APP が 1 台のモバイル用である場合は、クラスの幅と高さをいじって、テーブルの目的のサイズを取得するのは簡単です。

例 

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

main_container css はこのようになっているはずなので、残りを削除します。そうしないと、何もしない別の水平スクロール バーが表示されます。

  #main_container {
  overflow: hidden;
  }

スクロール バーは通常、デスクトップ ブラウザーとは異なり、モバイル ブラウザーでは非表示になっていますが、この css トリックを追加してビューから非表示にします。このトリックは、Google/Safari/Native Android などの Webkit ブラウザーでのみ機能します。

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

スクロールしているときに列に関連するデータをユーザーが確認できるように、テーブル ヘッダーを固定することをお勧めします。これを達成する方法はたくさんあります。以下に、見つけたリンクを追加しました

http://fixedheadertable.com/

于 2014-04-12T08:07:13.317 に答える