javascript - 一页中的两个数据表 - 如何只滚动其中一个表？

Question

我在一个页面中有两个数据表初始化如下:

      //First table
    sListTable = $('#subListTable').dataTable({
                "sScrollY": "265px",
                "sDom": "frtiS",
                "bDeferRender": true,
                "aaSorting": [[ 1, "desc" ]],
                "aoColumnDefs": [
                    {"sType": "date", "aTargets": [1]}
                ]
    });

      //Second table
    pListTable = $('#projListTable').dataTable({
                "sScrollY": "265px",
                "sDom": "frtiS",
                "bDeferRender": true,
                "aaSorting": [[ 1, "desc" ]],
                "aoColumnDefs": [
                    {"sType": "date", "aTargets": [1]}
                ]
    });

如您所见，我为每个表使用了一个单独的变量，并且每个表都有自己唯一的 ID。

现在我有一个函数可以自动突出显示“projListTable”表中的一行并根据某些事件将该行滚动到 View 中:

//Auto-scroll to row with 'row_selected' class                          
var container = $('#projListTable,div.dataTables_scrollBody');
var scrollTo = $('#projListTable tbody tr.row_selected');
container.scrollTop(scrollTo.offset().top - container.offset().top);

这个自动滚动脚本工作正常，但问题是它还会滚动另一个表 (sListTable)，即使“projListTable”已如上所示具体指定。

我需要做什么，以便只有“projListTable”是唯一受 container.scrollTop() 调用影响的表？我有一种感觉，因为他们共享“div.dataTables_scrollBody”，但我不知道如何解决它。任何帮助深表感谢。

这是显示问题的实际代码:

http://live.datatables.net/ekatik/8

Answer 1

你应该只选择目标表 .dataTables_scrollBody，使用这个:

SEE DEMO

  var container = $('#projListTable').closest('.dataTables_scrollBody');
  var scrollTo = $('#projListTable tbody tr.row_selected');
  container.scrollTop(0); 
  container.scrollTop(scrollTo.offset().top - container.offset().top);