在 .html() 之后使用 CSS header 锁在 extra div 中不起作用

Question

我正在尝试获取此 CSS header 锁：JSFiddle 在 .html() 加载后工作。如果我直接转到 php 页面，它工作得很好，但是如果我从另一个页面引用它并将它加载到 div，我无法让它工作，我无法弄清楚为什么。我感觉它与 "Loading" 页面上的额外 div 有关。其他一切正常，我只是无法让 headers 在从另一个页面加载时冻结。任何帮助是极大的赞赏。谢谢！

CSS:

div.esp{
    overflow-x: auto;
    white-space: nowrap;
    width: 500px;
    height: 200px;
    overflow: auto
}


/*the following html and body rule sets are required only if using a % width or height*/
html {
    width: 100%;
    height: 100%;
}
body {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 20px 0 20px;
  background: white;
}
.scrollingtable {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    width: auto; /*if you want a fixed width, set it here, else set to auto*/
    min-width: /*0*/100%; /*if you want a % width, set it here, else set to 0*/
    height: /*188px*/100%; /*set table height here; can be fixed value or %*/
    min-height: /*0*/104px; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 15px;
    line-height: 20px;
    padding: 20px 0 20px 0; /*need enough padding to make room for caption(s)*/
  text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
    position: relative;
    border-top: 1px solid black;
    height: 100%;
    padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
    top: 0;
    background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    left: 0;
}
.scrollingtable > div > div {
    min-height: /*0*/43px; /*if using % height, make this large enough to fit scrollbar arrows*/
    max-height: 100%;
    overflow: /*scroll*/auto; /*set to auto if using fixed or % width; else scroll*/
    overflow-x: hidden;
    border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
    width: 100%;
    border-spacing: 0;
    margin-top: -20px; /*inverse of column header height*/
    margin-right: 17px; /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
    position: absolute;
    top: -20px; /*inverse of top caption height*/
    margin-top: -1px; /*inverse of border-width*/
    width: 100%;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
    vertical-align: bottom;
    white-space: nowrap;
    text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
    display: inline-block;
    padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 20px; /*match column header height*/
    border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
    position: absolute;
    top: 0;
    white-space: pre-wrap;
    color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
    content: "";
    display: block;
    min-height: 20px; /*match column header height*/
    padding-top: 1px;
    border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
    position: absolute;
    width: 100px;
    top: -1px; /*inverse border-width*/
    background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
    content: "";
    display: table-cell;
    position: relative;
    padding: 0;
    border-top: 1px solid black;
    top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
    border-bottom: 1px solid black;
    padding: 0 6px 0 6px;
    height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/

PHP SAMPLE，它通过 mysql 循环提取数据，显示 HTML table 设置：

$HTMLTable = "<div class=\"scrollingtable\"><div><div><table id=\"myTable\" class=\"search-table inner\">";
$HTMLTable .= "<thead><tr><th><div><div>Peer IP</div><div>Peer IP</div></div></th>";
$HTMLTable .= "<th><div><div>Local Identity</div><div>Local Identity</div></div></th>";
$HTMLTable .= "<th><div><div>Remote Identity</div><div>Remote Identity</div></div></th>";
$HTMLTable .= "<th style=\"min-width: 75px;\"><div><div>Last Change</div><div>Last Change</div></div></th>";
$HTMLTable .= "<th><div><div>Previous Packet Encapsulations</div><div>Previous Packet Encapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Packet Encapsulations</div><div>Packet Encapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Difference for Encapsulations</div><div>Difference for Encapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Previous Packet Decapsulations</div><div>Previous Packet Decapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Packet Decapsulations</div><div>Packet Decapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Difference for Decapsulations</div><div>Difference for Decapsulations</div></div></th>";
$HTMLTable .= "<th><div><div>Send Errors</div><div>Send Errors</div></div></th>";
$HTMLTable .= "<th><div><div>Receive Errors</div><div>Receive Errors</div></div></th>";
$HTMLTable .= "<th style=\"min-width: 200px;\"><div><div>Inbound esp sas</div><div>Inbound esp sas</div></div></th>";
$HTMLTable .= "<th><div><div>Outbound esp sas</div><div>Outbound esp sas</div></div></th>";
$HTMLTable .= "<th class=\"scrollbarhead\"></th></tr></thead><tbody>";
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $InESPLines = explode("<br>",$row['in_esp']);
            foreach ($InESPLines as $InESPLine){
                if (preg_match("/inbound esp sas/",$InESPLine)){
                    $InESP .= $InESPLine;
                }
                elseif (preg_match("/spi:/",$InESPLine)){
                    $InESP .= "<br>&nbsp" . $InESPLine;
                }
                else {
                    $InESP .= "<br>&nbsp&nbsp&nbsp" . $InESPLine;
                }
            }   
        $OutESPLines = explode("<br>",$row['out_esp']);
            foreach ($OutESPLines as $OutESPLine){
                if (preg_match("/outbound esp sas/",$OutESPLine)){
                    $OutESP .= $OutESPLine;
                }
                elseif (preg_match("/spi:/",$OutESPLine)){
                    $OutESP .= "<br>&nbsp" . $OutESPLine;
                }
                else {
                    $OutESP .= "<br>&nbsp&nbsp&nbsp" . $OutESPLine;
                }
            }
        $Peer = $row['peer'];
        $phpdate = strtotime( $row['date_time'] );
        $myFormatForView = date("m/d/y", $phpdate);
        $myFormatForView .= "<br>" . date("g:i A", $phpdate);
        $DifferenceEncaps = $row['encaps'] - $row['prev_encaps'];
        $DifferenceDecaps = $row['decaps'] - $row['prev_decaps'];
        $HTMLTable .= "<tr><td><div class=\"content\">$Peer<button id=\"$Peer\">Update for this Peer</button></div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['local_identity'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['remote_identity'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $myFormatForView . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['prev_encaps'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['encaps'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">$DifferenceEncaps</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['prev_decaps'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['decaps'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">$DifferenceDecaps</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['send_err'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"content\">" . $row['recv_err'] . "</div></td>";
        $HTMLTable .= "<td><div class=\"esp\">" . $InESP . "</div></td>";
        $HTMLTable .= "<td><div class=\"esp\">" . $OutESP . "</div></td></tr>";
        $InESP = "";
        $OutESP = "";

    }   
}

$HTMLTable .="</tbody></table></div></div></div></div>";

print $HTMLTable;

?>

正在加载页面：

$('#loading_spinner').show();

var post_data = "Peer=" + "<?php echo $_REQUEST['Peer']?>";
$.ajax({
    url: 'phase2sql.php',
    type: 'POST',
    data: post_data,
    dataType: 'html',
    success: function(data) {
        $('.my_update_panel').html(data);
//Moved the hide event so it waits to run until the prior event completes
//It hide the spinner immediately, without waiting, until I moved it here
        $('#loading_spinner').hide();
    },
    error: function() {
        alert("Something went wrong!");
    }
});


<html> 
<head>
<script src="../../jquery/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="../../jquery/jquery-ui.theme.css">
<script src="../../jquery/jquery-ui.js"></script>
<link rel="stylesheet" href="../../jquery/jquery-ui.css"> 
<link rel="stylesheet" type="text/css" href="newphase2.css">
<div id="loading_spinner" style="width:100%">
<div id="load">Loading, please stand by...
<img id="Spinner" src="../../images/ccf.gif"/>
</div>
</div>
<div class="my_update_panel"></div> 
</head>
</html>

Answer 1

我认为将 DIV 之类的元素放在中不是一个好习惯，我什至很好奇它是否适合你。

我建议你不要从PHP写HTML，我会尝试发送JSON并在客户端处理它们。这可能会完全改变您的代码，但这是一个很好的做法，您将获得很多性能。

要发送您的数据库的结果，您可以这样做

header("Content-type: application/json;charset=UTF-8");
header("Pragma: no-cache");
header("Expires: 0");

echo json_encode($result) 
//if you have problems to format in JSON try this
//echo json_encode(utf8_encode($result))

json_encode 会产生问题，我通过手动创建 JSON 来解决它。还有一点工作

echo '{"items":[';
while ($row = $results->fetch_assoc() ) {
      $sku    = json_encode(utf8_encode($row["name"]));
      $value  = json_encode(utf8_encode($row["value"]));
      echo ('{"sku":'.$sku.',');
      echo ('"value":'.$value.'');
     }
echo "]}";

在javascript中您可以使用AJAX接收和发送请求而无需刷新页面。

function getURL(){
   var xhttp = new XMLHttpRequest();
   tablaHTML = document.getElementById('ID OF TBODY OR DIV')
   tablaHTML = '';
   xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            result = JSON.parse(this.responseText);
            result.forEach(function(item){
                   tablaHTML += '<tr>';
                   tablaHTML += '<td>' + item.local_identity + '</td>';
                   tablaHTML += '</tr>';
              });
        }
    }
    xhttp.open('GET', 'URL END POINT', true);
    xhttp.send();
}

不好意思没用Jquery，我一般都用

在我大量使用 PHP 渲染 HTML 之前，直到我明白我可以用这种做法使服务器过载多少，换一种方式就是使用 PHP做一个后端和微服务，同时使用客户端的处理

Answer 2

只需使用 https://github.com/twlikol/GridViewScroll 冻结 html table 中的顶行。

在 .html() 之后使用 CSS header 锁在 extra div 中不起作用

Using CSS header lock after .html() doesn't work within extra div

jquery

css

locking

freeze