如何为表格的行添加分页

Question

假设我有一个包含一些行的表。 我希望每一行都有一个页面。

每次我 select 一行并按下Show selected按钮，该行被追加到表中，如果我 select 40 行，40 行将被追加到表中，但我想要的是创建 40 个页面，每个页面都有一张只有一排的桌子。

JSFiddle 演示

当前结果：

期望的结果：

我很困惑，如何将href ="#"分配给表格中的一行？

如果我没记错的话，我必须这样做（Bootsrap 4.0 文档）：

Answer 1

一种方法是，当您在表格中的 append 行仅显示第一个 tr 并隐藏其他行时，当用户单击任何页码时，您可以显示该行并隐藏其他行。

演示代码：

 $(function() { $("button#show-selected,button#select-all").click(function() { show_All(); }); function show_All() { var html = ""; var html1 = ""; var buttons = "<button type='button' class='btn prev'> Prev </button>" $("#searchVariantTable tbody input[type=checkbox]:checked").each(function(index, item) { var selector = $(this).closest("tr") //get closest tr //generate htmls html1 += `<tr> <td><input id="gene_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find('td:eq(1)').text()}" readonly/></td><td><input id="variant_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(2)").text()}" readonly/></td> </tr>` html += `<tr> <td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(3)").text().trim()}" readonly/></td> <td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(4)").text().trim()}" readonly/></td> <td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(5)").text().trim()}" readonly/></td> <td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(6)").text().trim()}" readonly/></td> <td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(7)").text().trim()}" readonly/></td> </tr>` buttons += `<button type="button" data-id="${index}" class="btn indexs">${index + 1 }</button>` }); buttons += `<button type="button" class="btn next">Next</button>` $("#secondTable1").html(html1) $("#secondTable2").html(html) $("#pagination").html(buttons) $("#pagination button:eq(1)").addClass("btn-primary") $("#secondTable1 tr, #secondTable2 tr").hide() //hide trs $("#secondTable1 tr:eq(0), #secondTable2 tr:eq(0)").show() //show only first one } }); //this code will get called when number(1,2,.) is clicked not for next/prev btn you need to write logic for next/prev button. $("#pagination").on("click", ".indexs", function() { $(this).addClass("btn-primary").siblings().removeClass("btn-primary") //add class var data_id = $(this).data("id") //get index $("#secondTable1 tr, #secondTable2 tr").hide() //hide all tr $("#secondTable1 tr:eq(" + data_id + "), #secondTable2 tr:eq(" + data_id + ")").show() //show tr where index matches.. })

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <div class="container"> <div class="row" id="searchVariantTable"> <div class="col"> <table class="table table-hover mt-5"> <thead class="variants-table-thead"> <tr> <th class="active"> <input type="checkbox" class="select-all checkbox" name="select-all" /> </th> <th>Gene</th> <th>Variant</th> <th style="display: none;"></th> <th style="display: none;"></th> <th style="display: none;"></th> <th style="display: none;"></th> <th style="display: none;"></th> </tr> </thead> <,--The <tr> are populated dynamically after form submit. I just added some dummy values: BACKEND: (Python-Django) --> <tbody class="variants-table-tbody"> <tr> <td class="active"> <input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" /> </td> <td class="success">Gene1</td> <td class="warning">Variant1</td> <td style="display; none:"> #1 value1</td> <td style="display; none:"> #2 value1</td> <td style="display; none:"> #3 value1</td> <td style="display; none:"> #4 value1</td> <td style="display; none:"> #5 value1</td> </tr> <tr> <td class="active"> <input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" /> </td> <td class="success">Gene2</td> <td class="warning">Variant2</td> <td style="display; none:"> #1 value2</td> <td style="display; none:"> #2 value2</td> <td style="display; none:"> #3 value2</td> <td style="display; none:"> #4 value2</td> <td style="display; none:"> #5 value2</td> </tr> </tbody> </table> <button id="select-all" class="btn btn-primary">Select all</button> <button id="show-selected" class="btn btn-primary">Show selected</button> </div> </div> <div class="row"> <div class="col-6"> <table class="table mt-5"> <thead class="variants-table-thead"> <tr> <th style="text-align;center:">Gene</th> <th style="text-align;center:">Variant</th> </tr> </thead> <tbody class="variants-table-tbody" id="secondTable1"> <;--data will come here --> </tbody> </table> </div> <div class="col-6"> <div style="text-align: center;"> <h5>Genomic coordinate</h5> </div> <table class="table mt-4"> <thead class="variants-table-thead"> <tr> <th style="text-align:center;">Opt #1</th> <th style="text-align:center;">Opt #2</th> <th style="text-align:center;">Opt #3</th> <th style="text-align:center;">Opt #4</th> <th style="text-align:center;">Opt #5</th> </tr> </thead> <tbody class="variants-table-tbody" id="secondTable2"> <!--data will come here --> </tbody> </table> </div> </div> </div> <div id="pagination"></div>