How to make a table visible once the button of a pagination is clicked?
Question
So i'm trying to make a pagination style section where the user can change the table information. I can make already that when i press "2" the second table appears and when i click "1" or "<" it returns to the first table. The problem i have is that both tables appear on the page when i start it for the first time and when i use the pagination it only show a single table.
I tried to put on the CSS code the property display: none and it worked but eventually when i click on the "2" button it doesn't appear.
This is the code i have atm:
<div class="col-sm-8">
<div class="col-sm-8c col-md-12 bg-light">
<div class="col-sm-8 col-md-12">
<div id="tabla1" class="tabcontent">
<div class="table-responsive my-3">
<table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Faculty</th>
<th></th>
<th>Progress of<br>donations</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
</div>
</th>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
</div>
</th>
</tr>
<tr>
<td>3</td>
<td>Mariana</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
</div>
</th>
</tr>
<tr>
<td>4</td>
<td>Evelyn</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>
</th>
</tr>
<tr>
<td>5</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
</div>
</th>
</tr>
<tr>
<td>6</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</th>
</tr>
<tr>
<td>7</td>
<td>Sebastian</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<div id="tabla2" class="tabcontent">
<div class="table-responsive2 my-3">
<table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Faculty</th>
<th></th>
<th>Progress of<br>donations</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
</div>
</th>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
</div>
</th>
</tr>
<tr>
<td>3</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
</div>
</th>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>
</th>
</tr>
<tr>
<td>5</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
</div>
</th>
</tr>
<tr>
<td>6</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</th>
</tr>
<tr>
<td>7</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
And the code for the buttons is this one:
<div class="tab" >
<button class="tablinks" onclick="openCity(event, 'tabla1')"><</button>
<button class="tablinks2" onclick="openCity(event, 'tabla1')">1</button>
<button class="tablinks3" onclick="openCity(event, 'tabla2')">2</button>
<button class="tablinks4" onclick="openCity(event, 'tabla2')">3</button>
<button class="tablinks" onclick="openCity(event, 'tabla2')">4</button>
<button class="tablinks" onclick="openCity(event, 'tabla2')">></button>
</div>
And the javascript code:
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
Any way i can make that when i click in the "2" button only the second table appears? This is what it shows on the page when i click the "2" button.
1 answers
solution1
1 ACCPTED 2018-05-26 04:09:05
Add the following code to hide all the tables except the first on page load:
document.querySelectorAll(".tabcontent").forEach(function(table, i){
if(i >= 1){
table.style.display = "none";
}
});
Working Code Snippet:
document.querySelectorAll(".tabcontent").forEach(function(table, i){ if(i >= 1){ table.style.display = "none"; } }); function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; }
<div class="col-sm-8"> <div class="col-sm-8c col-md-12 bg-light"> <div class="col-sm-8 col-md-12"> <div id="tabla1" class="tabcontent"> <div class="table-responsive my-3"> <table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa"> <thead> <tr> <th>#</th> <th>Name</th> <th>Faculty</th> <th></th> <th>Progress of<br>donations</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div> </div> </th> </tr> <tr> <td>2</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div> </div> </th> </tr> <tr> <td>3</td> <td>Mariana</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div> </div> </th> </tr> <tr> <td>4</td> <td>Evelyn</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div> </div> </th> </tr> <tr> <td>5</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div> </div> </th> </tr> <tr> <td>6</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div> </div> </th> </tr> <tr> <td>7</td> <td>Sebastian</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div> </div> </th> </tr> <tr></tr> <tr></tr> <tr></tr> </tbody> </table> </div> </div> <div id="tabla2" class="tabcontent"> <div class="table-responsive2 my-3"> <table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa"> <thead> <tr> <th>#</th> <th>Name</th> <th>Faculty</th> <th></th> <th>Progress of<br>donations</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div> </div> </th> </tr> <tr> <td>2</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div> </div> </th> </tr> <tr> <td>3</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div> </div> </th> </tr> <tr> <td>4</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div> </div> </th> </tr> <tr> <td>5</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div> </div> </th> </tr> <tr> <td>6</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div> </div> </th> </tr> <tr> <td>7</td> <td>Mary</td> <td>FCQI</td> <td> <center> <button type="button" class="btn btn-primary btn-sm">Donar</button> </center> </td> <th> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div> </div> </th> </tr> <tr></tr> <tr></tr> <tr></tr> </tbody> </table> </div> </div> <div class="tab" > <button class="tablinks" onclick="openCity(event, 'tabla1')"><</button> <button class="tablinks2" onclick="openCity(event, 'tabla1')">1</button> <button class="tablinks3" onclick="openCity(event, 'tabla2')">2</button> <button class="tablinks4" onclick="openCity(event, 'tabla2')">3</button> <button class="tablinks" onclick="openCity(event, 'tabla2')">4</button> <button class="tablinks" onclick="openCity(event, 'tabla2')">></button> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to make a dropdownlist visible once clicking a button
How to make a input field visible when a button is clicked or create the same field when a button is clicked for ruby on rails
How to make my button display two different images once clicked?
How do I make a button disappear once clicked?
How to make HTML table that can be resized to the visible window with button (javascript)?
How do I remove the 0 once a button is clicked?
How to Disable the search button once it is clicked
How to disable a button once clicked in JSX, ReactJs?
How to deactivate button once clicked Javascript
How to make function work only once even when button is clicked twice?
Related Tags