Two DataTables in one page - how to scroll just one of the tables?

c55v8

I have two DataTables in one page initialized as follows:

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

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

As you can see, each is pertaining to a different table with a unique ID.

Now I have a function that automatically highlights a row in the "projListTable" table and scrolls that row in view.
The script is working fine, but the problem is that it also scrolls the other table even though "projListTable" is specifically specified as shown below:

[code]
//auto scroll to view script
var container = $('#projListTable,div.dataTables_scrollBody');
var scrollTo = $('#projListTable tbody tr.row_selected');
container.scrollTop( scrollTo.offset().top - container.offset().top);
[/code]

What do I need to do, such that only "projListTable" is the only one affected by the the container.scrollTop call?

c55v8

Anybody?

I have a feeling it's because they share "div.dataTables_scrollBody", but I can't figure out how to get around with it. Any help is much appreciated.

allan

I don't understand how they can share the scrolling body element. Please link to a test case.

Allan

c55v8

Here's a test case link:

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

In that link, I have two tables in the HTML, and somewhere in the middle of the bottom table, I have hardcoded one row with an ID of "myRowID". I highlight that row and auto-scroll to it. Code is working, but the top table also scrolls for some reason.

c55v8

Figured it out. Need to use closest().

var container = $('#projListTable').closest('.dataTables_scrollBody');