Space_Shift
Reputation: 83
How to make a table visible once the button of a pagination is clicked?
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.
Upvotes: 0
Views: 40
Answers (1)
Mamun
Reputation: 68923
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>Upvotes: 1
Related Questions
- Display table on button click in Javascript
- get all rows of a pagination table
- How to display show / hide table on plus minus button click
- Bootstrap table not paginating
- Add button to scroll table horizontally?
- Show table by clicking a button
- Button click not triggered if using bootstrap-table pagination / search
- How to add pagination and search on bootstrap table
- Table pagination using bootstrap
- BootstrapTable don't work pagination