2

私はjqueryデータテーブルとjScrollpaneを連携させようとしましたが、うまくいきました..

表を右にスクロールすると、ヘッダーがうまくいかないようです。

ここに私のHTMLのコードスニペットがあります:

$("#my-table").dataTables({
    // ...
    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "fnDrawCallback": function(){
        $('.dataTables_scrollBody').jScrollPane();
    }
});

誰かアイデアがありますか？

どんな助けでも大歓迎です:)

ありがとう..

4

2 に答える 2

1

この答えはもう少し古いですが、私は同じ問題を抱えていました。発生するjScrollPaneイベントを使用して解決しました。テーブル本体がスクロールすると、このイベントが通知され、テーブルヘッダーが手動で正しい位置に設定されます。

$('table.selection_list').dataTable({
  sScrollY: '300px',
  sScrollX: '100%',
  sScrollXInner: '320%',
  bPaginate: false,
  bInfo: false,
  bFilter: false,
  "fnInitComplete": function() {
    var table_header,
      _this = this;
    table_header = $('.dataTables_scrollHeadInner').css('position', 'relative');
    $('body.admin.selections_index').find('.dataTables_scrollBody').bind('jsp-scroll-x', function(event, scrollPositionX, isAtLeft, isAtRight) {
     table_header.css('right', scrollPositionX);
    }).jScrollPane();
  }
});
于 2012-06-11T08:38:39.760 に答える
1

私は bScrollInfinite を使用しており、コードを少し変更しました:

    fnDrawCallback: function() {
            table_header = $('.dataTables_scrollHeadInner').css('position', 'relative');
            $('body').find('.dataTables_scrollBody').bind('jsp-scroll-y',
            function(event, scrollPositionY, isAtTop, isAtBottom) {
                table_header.css('bottom', scrollPositionY);
            }).jScrollPane({
                verticalDragMinHeight: 15,
                verticalDragMaxHeight: 15,
                autoReinitialise: true
            });
        }

しかし、私がテーブルの最後にいて、別のデータセットをロードしたいということをテーブルに伝える方法がわかりません:(

于 2013-07-12T09:10:48.213 に答える