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是有點老滾輪現在是原產於數據表，所以是否適合你，可能是一個更好的選擇。