How to add pagination to the rows of a table

Question

Let's say I have a table with some rows. I would like to have a page for each row.

Every time I select a row and press the Show selected button, the row is appended to the table, if I select 40 rows, 40 rows will be appended to the table, but what I want is that 40 pages are created and each page has one table with only one row.

JSFiddle Demo

Current result:

Desired result:

I am confused, how can I assign a href ="#" to a row in a table?

If I am not mistaken I have to do something like this (Bootsrap 4.0 documentation):

Answer 1

One way would be when you append rows inside your table show only first tr and hide others and when user click on any page number you can show that row and hide other.

Demo Code :

 $(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>