javascript - Two DataTables in one page - how to scroll just one of the tables? -
i have 2 datatables in 1 page initialized follows:
//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]} ] });
as can see, i'm using separate variable each table , each table has it's own unique id.
now have function automatically highlights row in "projlisttable" table , scrolls row view based on event:
//auto-scroll row 'row_selected' class var container = $('#projlisttable,div.datatables_scrollbody'); var scrollto = $('#projlisttable tbody tr.row_selected'); container.scrolltop(scrollto.offset().top - container.offset().top);
this auto-scrolling script working fine, problem scrolls other table (slisttable) though "projlisttable" specified shown above.
what need do, such "projlisttable" 1 affected the container.scrolltop() call? have feeling it's because share "div.datatables_scrollbody", can't figure out how around it. appreciated.
here's code in action showing problem:
you should select targetted table .datatables_scrollbody
, using this:
var container = $('#projlisttable').closest('.datatables_scrollbody'); var scrollto = $('#projlisttable tbody tr.row_selected'); container.scrolltop(0); container.scrolltop(scrollto.offset().top - container.offset().top);