固定标题可滚动表 - 如何在页面加载时使用css jquery保留水平滚动位置 [英] Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page loads

问题描述

我有一个带有水平和垂直滚动条的固定标题滚动表，我现在可以对每列进行排序，但在加载页面时无法正确保存表格的水平位置。

使用以下内联css从隐藏输入中获取 scrollAmount ，其值来自jquery代码和输入it into the inline css

  style =transform：translateX（< scrollAmount>的负偏移值）
 
 $        
 
 
 
   
 
  transform：translateX（ - <？= scrollAmount（）？> px）
  
  jQuery Scroll Position Function 
 
 
 
  function setScroll id_header，id_table）
 {
 $（'div。'+ id_table）.on（scroll，function（）{//当#center滚动
时激活var left = $（' div。'+ id_table）.scrollLeft（）; // save #center position to var left 
 $（'div。'+ id_header）.scrollLeft（left）; // set #top to var left 
 $（'＃scrollamount'）。val（left）; 
}）; 
  
 隐藏输入HTML代码 
 < input type =hiddenid =scrollamountname =scrollamountvalue =<？= scrollAmount（）？>/> 
  
  PHP代码 
  function scrollAmount（）
 {
 if（isset（$ _ POST ['scrollamount']））
 return $ _POST ['scrollamount']; 
 return; 
} 
  
 
 
解决方案
使用以下代码，我能够生成一个视觉可接受的解决方案，通过用户的滚动量保持表格水平偏移。
 
 
 
  JS代码 - 执行on 
  //翻译0px，撤消原始翻译
 $（'table＃'+ id_table）.attr（style，transform：translateX（0px））; 
 $（'table＃'+ id_header） transform：translateX（0px））; 
 
 //向左滚动到隐藏输入`＃scrollamount` 
 $（'div。'+ id_table）.scrollLeft（$（'＃scrollamount'））中定义的所需数量。 val（））; 
 $（'div。'+ id_header）.scrollLeft（$（'＃scrollamount'）。val（））; 
  
  HTML / PHP代码 - 固定标题滚动表（标题和表体） 
 < div class =summary_header> 
< table id =summary_headerborder = 1 style =transform：translateX（ - <？= scrollAmount（）？> px）> 
 ...< -----表头定义
< / table> 
< / div> 
 
< div class =summary_tablestyle =overflow-x：scroll> 
< table id =summary_tablestyle =transform：translateX（ - <？= scrollAmount（）？> px）> 
 ...<  - 表体定义
< / table> 
< / div> 
  
 
I have a fixed header scrolling table with horizontal and vertical scroll bars, for which I can presently sort on each column but am unable to properly preserve horizontal position of the table when loading the page.


Using the following inline css I get scrollAmount from php from a hidden input whose value is from a jquery code and input it into the inline css 
style="transform:translateX(<negative offset value of scrollAmount>)"
My question is how do I properly maintain scroll position for a table that overflows with a horizontal scroll bar using CSS and jQuery without waiting for the page to completely load / finish rendering?

Inline style
transform:translateX(-<?=scrollAmount()?>px)
jQuery Scroll Position Function
function setScroll(id_header, id_table)
        {
             $('div.'+id_table).on("scroll", function(){  //activate when #center scrolls
                    var left = $('div.'+ id_table).scrollLeft();  //save #center position to var left
                   $('div.'+id_header).scrollLeft(left);        //set #top to var left
                   $('#scrollamount').val(left);
                });
Hidden Input HTML Code
<input type="hidden" id="scrollamount" name="scrollamount" value=<?=scrollAmount()?>"/>
PHP Code
 function scrollAmount()
    {
        if (isset($_POST['scrollamount']))
            return $_POST['scrollamount'];
        return "";
    }

解决方案
Using the following code, I was able to produce a visually acceptable solution that keeps the table horizontally offset by the user's scrolled amount.

JS Code - Executes on document.ready() when table has finished fetching/loading
//Translate 0px, undoing the original translation       
$('table#'+ id_table).attr("style", "transform:translateX(0px)");   
$('table#'+ id_header).attr("style", "transform:translateX(0px)");  

//Scroll left to the desired amount as defined in the hidden input `#scrollamount` 
$('div.'+ id_table).scrollLeft($('#scrollamount').val());
$('div.'+ id_header).scrollLeft($('#scrollamount').val());
HTML / PHP Code - Fixed Header Scrolling Table (Header and Table Body)
<div class="summary_header">
<table id="summary_header" border=1 style="transform:translateX(-<?=scrollAmount()?>px)">
    ... <-----Table Header Definition
</table>
</div>

<div class="summary_table" style="overflow-x:scroll">     
<table id="summary_table" style="transform:translateX(-<?=scrollAmount()?>px)">
    ... <--Table Body Definition
</table>
</div>


                        
这篇关于固定标题可滚动表 - 如何在页面加载时使用css jquery保留水平滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！