如何在每30秒刷新一次ajax刷新时应用Sticky Table标头设计？

Question

I am following this tutorial for jquery Sticky Table Header design. 我正在关注jquery Sticky Table Header设计的本教程。 And I am able to make this work and it works fine. 而且我能够完成这项工作并且工作正常。

By Sticky Table Header I mean - I will be able to move table header column and table row header if I am scrolling right on my table or if I am scrolling down just as shown in the above tutorial example. 通过Sticky Table Header我的意思是 - 如果我在我的桌子上滚动，或者我正在向下滚动，我将能够移动table header column和table row header如上面的教程示例所示。

Here is my jsfiddle which is using the same idea and has all my jquery and ajax refresh call as well. 这是我的jsfiddle ，它使用相同的想法，并且还有我所有的jquery和ajax刷新调用。 In my jsfiddle, you won't be able to see the how the page looks like after the refresh as I am not able to find a way to show the page after refresh in jsfiddle. 在我的jsfiddle中，你将无法看到刷新后页面的样子，因为我无法找到在jsfiddle中刷新后显示页面的方法。 In general, I have a simple static JSP page which has the same html as shown in the jsfiddle and I am just refreshing the container div every 30 seconds. 一般来说，我有一个简单的静态JSP页面，它具有与jsfiddle中显示的相同的html，我只是每30秒刷新一次容器div。

As I added one more feature, which is to refresh the container div every 30 seconds (part of jsfiddle example). 我添加了另外一个功能，即每30秒刷新一次container div （jsfiddle示例的一部分）。 And my refresh is working fine but what happens after refresh is - 我的刷新工作正常，但刷新后会发生什么 -

I always see a gap between last row and scrollable bar (see below image). 我总是看到最后一行和可滚动条之间的间隙（见下图）。
Secondly, sticky table header feature doesn't work as well on the refresh somehow. 其次，粘性表头功能在刷新时不能正常工作。

I am suspecting this is happening because of my css issue or I need to init some js. 我怀疑这是因为我的CSS问题或者我需要初始化一些js。

Below is my testingstick.jsp code - 下面是我的testingstick.jsp代码 -

<body>
    <div class="container">     
        <div class="component">

            <table id="tabDes" style=''>
                <thead>
                    <tr>
                        <th>Machine Name</th>
                        <th>Fresh Data 95</th>
                        <th>Fresh Data 99</th>
                        <th>Data Hello</th>
                        <th>Data World</th>
                        <th>Average</th>
                        <th>Status Server</th>
                        <th>Workflow</th>                           
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>machineA</th>
                        <td>52</td>
                        <td>40</td>
                        <td>9</td>
                        <td>47</td>
                        <td>31</td>
                        <td>UP</td>
                        <td>NONE</td>                           
                    </tr>
                </tbody>
            </table>
        </div>  
    </div><!-- /container -->
</body>

Any thoughts how can I avoid these issues? 有什么想法我怎么能避免这些问题？ You can use my jsfiddle as shown above to built this locally to reproduce this problem. 你可以使用我的jsfiddle如上所示在本地构建它来重现这个问题。

Here is an image which looks like after the refresh and you can see clearly that there is a gap coming between last row and scroller and also sticky table header doesn't work - 这是一个看起来像刷新后的图像，你可以清楚地看到最后一行和滚动条之间存在间隙，并且粘性表头也不起作用 -

在此输入图像描述

NOTE:- 注意：-

I am working with JSP and Spring Controller so I am passing data from Controller to JSP and then I am using Ajax refresh to refresh the page so that updated data gets shown automatically. 我正在使用JSP和Spring Controller，所以我将数据从Controller传递到JSP，然后我使用Ajax刷新刷新页面，以便自动显示更新的数据。 But to understand my question, I have hardcoded the values in the Table which in general is coming from Controller. 但是为了理解我的问题，我已经硬编码了Table中的值，这些值通常来自Controller。

UPDATE:- 更新： -

After ajax refresh, this is what I get back in data as I logged into console as console.log(data) and from this I am extracting container div. 在ajax刷新之后，这是我在data获取的data因为我作为console.log(data)登录到控制台，从中我提取容器div。

GET http://localhost:8080/p13nzookweb/testingstick.jsp

200 OK
        115ms   
jquery.min.js (line 5)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="/ressvr/v/4m5ts2dj2y1pdj0yoexr5fvh5yx.css?debug=true&showRaw=true" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Testing Stickness</title>
<style>
.red {
    color: #ff0000;
    font-weight: bold;
}
</style>

<!-- CSS Stuff -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script src="http://tympanus.net/Tutorials/StickyTableHeaders/js/jquery.stickyheader.js"></script>


<script>

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 30 * 1000);
});

//Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'testingstick.jsp',
        type: 'GET',
        success: function(data){
            console.log(data);
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').html(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

</script>

</head>

<body>

    <div class="container">
        <div class="component">
            <table class="overflow-y">
                <thead>
                    <tr>
                        <th>Machine Name</th>
                        <th>Fresh Data 95</th>
                        <th>Fresh Data 99</th>
                        <th>Data Hello</th>
                        <th>Data World</th>
                        <th>Average</th>
                        <th>Status Server</th>
                        <th>Workflow1111111111</th>
                        <th>Workflow1222222</th>
                        <th>Workflow23333333</th>
                        <th>Workflow34444444444444</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>machineA</th>
                        <td>52</td>
                        <td>40</td>
                        <td>9</td>
                        <td>47</td>
                        <td>31</td>
                        <td>UP</td>
                        <td>NONE</td>
                        <td>YES</td>
                        <td>NO</td>
                        <td>YUP</td>                                                                        
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>

testingstick (line 46)

I am using this javascript - <script src="http://tympanus.net/Tutorials/StickyTableHeaders/js/jquery.stickyheader.js"></script> which is adding all the extra stickness in the table so I am thinking because of automatic refresh it is getting disabled which means I need to init something after refresh I guess.. 我正在使用这个javascript - <script src="http://tympanus.net/Tutorials/StickyTableHeaders/js/jquery.stickyheader.js"></script>这是在表中添加所有额外的粘性，所以我在想因为自动刷新它被禁用，这意味着我需要在刷新后初始化一些东西我猜...

Answer 1

Okay, 好的，

the main issue is that the code in the tutorial does not result in some plugin that is reusable. 主要问题是本教程中的代码不会导致某些可重用的插件。

It is code that runs once on DOM ready, that does its stuff altering the DOM and finishes.. There is no API to re-run/update or do anything with it.. 它是在DOM就绪上运行一次的代码，它可以改变DOM并完成它。没有API可以重新运行/更新或对它做任何事情。

So I wrapped that code inside a function and called that instead of including the .js file ( which runs once ). 所以我将该代码包装在一个函数中并调用它而不是包含.js文件（ 运行一次 ）。

Demo at http://jsfiddle.net/AybKj/ ( with some changes to work around the ajax limitation ) 在http://jsfiddle.net/AybKj/进行演示（ 有一些改变以解决ajax限制 ）

basically I create a function pluginCode which contains the whole script from the tutorial, and run it once at DOM ready, and then at the end of each AJAX call to re-set the table. 基本上我创建了一个函数pluginCode ，它包含教程中的整个脚本，并在DOM准备好运行一次，然后在每次AJAX调用结束时重新设置表。 ) ）

如何在每30秒刷新一次ajax刷新时应用Sticky Table标头设计？

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-03-23 01:33:19

如何在每30秒刷新一次ajax刷新时应用Sticky Table标头设计？

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-03-23 01:33:19

解决方案1
2 已采纳 2014-03-23 01:33:19