如何將表格滾動到特定的單元格。 （使用數據表jQuery插件以及固定列）

Question

我有一個表，其中我使用數據表jQuery插件固定列添加固定列和固定行。

插件工作正常。現在我想滾動到表格加載的特定單元格。 我有一個單元格的ID。

我嘗試以下操作：

$(document).ready(function() { 
    var oTable = $('#masterGridTable').dataTable({ 
     "sScrollY": "255px", 
     "sScrollX": "100%", 
     "sScrollXInner": "150%", 
     "bScrollCollapse": false, 
     "bPaginate": false, 
     "bFilter": false, 
     "bInfo": false, 
     "fnInitComplete": function (oSettings, json) { 

     } 
    }); 
    new FixedColumns(oTable); 
    var scrollToView = document.getElementById('selectedElementId'); 
    if (scrollToView) 
     scrollToView.scrollIntoView(true); 
}); 

它的工作原理，但問題是它的方法scrollIntoView不會在屏幕中間滾動細胞。我也嘗試使用jQuery scroll plugin。

這工作正常，如果我使用它沒有datatables，但兩者不能同時工作。

任何想法？

Answer 1

解決了它。 這是我的解決方案。 我用jQuery的scrollTo插件來滾動瀏覽表格。

$(document).ready(function() { 
      //var selectedElementId = 'selectedElementId'; 
      var oTable = $('#masterGridTable').dataTable({ 
       "sScrollY": "255px", 
       "sScrollX": "100%", 
       "sScrollXInner": "150%", 
       "bScrollCollapse": false, 
       "bPaginate": false, 
       "bFilter": false, 
       "bInfo": false, 
       "bStateSave": true, 
       "fnInitComplete": function (oSettings, json) { 
        var elementV = '{!selectedElementId}'; 
        if(elementV!= null && elementV.trim()!= ''){ 
         elementV = elementV.split(':').join('\\:'); 
         $('.dataTables_scrollBody').scrollTo('.'+elementV,2000,{offset: {top:0, left:-130} }); 
        } 
       } 
      }); 
      new FixedColumns(oTable); 
      var scrollToView = document.getElementById('{!selectedElementId}'); 
      if(scrollToView) 
      scrollToView .scrollIntoView(true); 

     }); 

此前我試圖使用表的ID進行滾動。但是當Datatables插件工作時，它將表格分成不同的部分，固定標題，固定列和表格主體在不同的div中。所以我在scrollTo插件中使用'datatables_scrollBody'和要滾動的單元格類。 ，頂部偏移量爲0，左側爲-130，這是我們需要從表格總寬度中減去的第一個固定列的寬度。 希望它有助於某人。 :)