jQuery DataTables ScrollTo div

Question

我正在使用jQuery表格，并试图找出当您使用details-control使表格自动向下滚动以显示单击绿色加号时的详细信息。我曾尝试调用该div让它自动滚动到div。请有人告诉我我哪里出错了。如果你点击加号有些用户可能不知道的向下滚动，他们不会看到提供“更多信息” https://jsfiddle.net/nnb97rh9/3/

的问题是名单上的更低。

引用我已经使用：
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

正如昨天提到，您需要使用数据表Scroller扩展。您使用它的ScrollTo库很旧，我不确定它是否适用于Datatables 1.10。

我已经创建了一个基于你一个的jsfiddle - 这应该是正是你需要的：

你JSFIDDLE修正。

最重要的一点是在这里：

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

哪里current是点击行的索引。表格将滚动，以便点击的行位于顶部，并且扩展部分完全可见。

Answer 2

如果有人来这里想要使用scrollTo jquery插件，那么这里是一个JSFIDDLE，它使用该工具代替滚动条。

您只需引用数据表滚动体css类并滚动到最后一个tr。如果您尝试通过表id（在这种情况下为#example）引用它，则无论出于何种原因它都不起作用。

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

由于markpsmith指出scrollTo是有点老滚轮现在是原产于数据表，所以是否适合你，可能是一个更好的选择。