具有固定表头的表行的分页

Question

在我的网站上，我创建了一个“动态”表。 我想包括一个分页，一次只显示 10 行。 表头应显示在每页的行上方。

但是使用我的分页 function，里面的所有内容都放在“Ref.”下。 如果我取消注释注释部分，则分页根本不起作用。

我的代码需要更改哪些内容才能在每一页上正确显示表格？ （“Ref.”下的所有 ref{{i}} /“Score”下的“score{{i}} /...）

桌子：

 {% if empty == False %}
                  <table style="float: left; width: 100%" class="table table-hover">
                      <thead id="header">
                      <tr >
                          <th>Ref.</th>
                          <th>Score</th>
                          <th>Title</th>
                      </tr>
                      </thead>

                      <tbody>
                      {% for i in range (0,numofresults) %}
                      <tr id="cardmb3n{{i}}">
                          <td id="ref{{i}}"> </td>
                          <td id="score{{i}}" "> </td>
                          <td>
                              <div>
                                  <a id="header{{i}}" href=""></a><br>
                                  <a id="hyperlink{{i}}" href="" ></a>
                              </div>
                         </td>
                      </tr>
                      </tbody>
                      {% endfor %}
                  </table>

分页：

    {% if empty == False %}
                function paginate(page){
                    var val = parseInt(document.getElementById("currentpage").innerHTML);
                    if(page=='Next'){
                        page = val + 1;
                    } else if(page=='Previous'){
                        page = val - 1;
                    } else{
                        page = parseInt(page);
                    }
                    if(val!=page){
                        for(var j = 0; j<ergebnisliste.length; j++){
                            if(j>=(page-1)*10 && j<10*page){
                               // document.geElementById("header").style = "display:table";
                                document.getElementById("cardmb3n" + j).style = "display:block";
                            }else{
                               // document.geElementById("header").style = "display:none";
                                document.getElementById("cardmb3n" + j).style = "display:none";
                            }
                        }                                          
            ........some code.........
                   }
                }
 {% endif %}

Answer 1

找到了解决方案： document.getElementById("cardmb3n" + j).style = "display:table-row";