jQuery DataTables ScrollTo div

Question

Я использую таблицы jQuery и пытаюсь выяснить, когда вы используете детали управления, чтобы таблица автоматически прокручивалась вниз, чтобы показать детали при щелчке зеленого плюса. Я попытался позвонить в div, чтобы он автоматически прокручивался до div. Кто-нибудь скажет мне, где я ошибаюсь.

Проблема ниже в списке, если вы щелкнете знак плюса, который некоторые пользователи могут не знать, чтобы прокрутить вниз, и они не будут видеть предоставленную «дополнительную информацию».

Ссылки я использовал:
https://datatables.net/forums/discussion/2140/scroll-to-highlighted-row
https://github.com/flesler/jquery.scrollTo
https://www.datatables.net/examples/server_side/row_details.html

function format (d) { 
    // `d` is the original data object for the row 
    return '<div class="slider">'+ 
     '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
      '<tr>'+ 
       '<td>Full name:</td>'+ 
       '<td>'+d.name+'</td>'+ 
      '</tr>'+ 
      '<tr>'+ 
       '<td>Extension number:</td>'+ 
       '<td>'+d.extn+'</td>'+ 
      '</tr>'+ 
      '<tr>'+ 
       '<td>Extra info:</td>'+ 
       '<td>And any further details here (images etc)...</td>'+ 
      '</tr>'+ 
     '</table>'+ 
    '</div>'; 
} 

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "ajax": 'https://api.myjson.com/bins/16lp6', 
     scrollY:  250, 
     deferRender: true, 
     scroller:  true, 
     "columns": [ 
      { 
       "class":   'details-control', 
       "orderable":  false, 
       "data":   null, 
       "defaultContent": '' 
      }, 
      { "data": "name" }, 
      { "data": "position" }, 
      { "data": "office" }, 
      { "data": "salary" }, 
      { "data": "extn", "visible": false } 

     ], 
     "order": [[1, 'asc']] 
    }); 

    // Add event listener for opening and closing details 
    $('#example tbody').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var row = table.row(tr); 
     var scroller = table.fnSettings().ntable.parentNode; 
     var clickedIndex = $(this).index(); 

     if (row.child.isShown()) { 
      // This row is already open - close it 
      $('div.slider', row.child()).slideUp(function() { 
       row.child.hide(); 
       tr.removeClass('shown'); 
      }); 
     } 
     else { 
      // Open this row 
      row.child(format(row.data()), 'no-padding').show(); 
      tr.addClass('shown'); 

      $('div.slider', row.child()).slideDown(); 
      $(scroller).scrollTo($("div.slider"), 1); 
     } 
    }); 
}); 

Answer 1

Как уже упоминалось вчера, вам нужно использовать расширение DataTables Scroller. Библиотека ScrollTo, которую вы используете, довольно старая, я не уверен, что она работает с Datatables 1.10.

Я создал jsfiddle основанный на вашем - это должно быть именно то, что вам нужно:

Вашего JSFIDDLE поправки.

Важный бит здесь:

var current = tr.index(); 
table.scroller().scrollToRow(current); 

Где current является индекс щелкнули строки. Таблица будет прокручиваться, так что щелкнутая строка находится вверху, а израсходованный раздел полностью виден.

Answer 2

Если кто-то приходит сюда и хочет использовать плагин scrollTo jquery, то вот JSFIDDLE, который работает с этим, а не скроллером.

Вы просто ссылаетесь на таблицы данных, прокручиваете тело css класса и прокручиваете до последнего tr. Если вы попытаетесь ссылаться на его идентификатор таблицы (в этом случае # пример), он не будет работать по какой-либо причине.

$('.dataTables_scrollBody').scrollTo(tr);

Как markpsmith указывает scrollTo староват и теперь скроллер является родным для DataTables, поэтому, если это работает для вас, что, вероятно, является лучшим вариантом.