pagination for table rows with fixed tablehead

Question

On my website I created a "dynamic" table. I want to include a pagination, to only show 10 rows at a time. The table head shall be displayed above the rows on every page.

But with my pagination function, all the content within is put under "Ref.". If I uncomment the commented part, the pagination does not work at all.

What needs to changed in my code to display the table correct on each page? (all ref{{i}} under "Ref." / "score{{i}} under "Score" /...)

Table:

 {% 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>

Pagination:

    {% 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 %}

alipfi alipfi · Accepted Answer · 2019-11-22T13:34:10

0

votes

found a solution: document.getElementById("cardmb3n" + j).style = "display:table-row";

pagination for table rows with fixed tablehead

1 Answers