jQuery datatables и jScrollPane - заголовок таблицы не прокручивается - PullRequest
2 голосов
/ 05 декабря 2011

Я пытался совместить jatery datatables и jScrollpane, все прошло хорошо, но одна вещь ...

когда я прокручиваю таблицу вправо, заголовок, кажется, не ладит.

вот мой фрагмент кода в моем html:

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

у кого-нибудь есть идея?

любая помощь будет оценена:)

спасибо ..

Ответы [ 2 ]

1 голос
/ 12 июля 2013

Я использую 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
            });
        }

Но не знаю, как сказать таблице, что я нахожусь в конце таблицы и хочу загрузить другой набор данных: (

1 голос
/ 11 июня 2012

Этот ответ уже немного устарел, но у меня была такая же проблема.Я решил это с помощью событий 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();
  }
});
...