I use a button to toggle visible/hidden values in a table. This works fine but when I click on a thead data-sortable, this shows again hidden rows. How can I keep hidden rows hidden when clicking on a thead ? PS: I want to keep the values in case the user unchecks the button.
Thanks
<html lang='fr'>
<head>
<meta charset="utf-8" />
<meta content="width=device-width" name="viewport" />
<link rel="shortcut icon" href="/img/favicon.ico" type="image/png" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class='container'>
<div data-toggle="buttons">
<label >
<input id='sans-sel' type="checkbox" autocomplete="off"> Without
</label>
</div>
<table class='table table-stripped table-bordered data-sort-name="Nom" data-sort-order="desc"' data-toggle="table">
<thead>
<tr>
<th data-field="Nom" data-sortable="true">Name</th>
<th data-field="sel" data-sortable="true">Sel</th>
<th data-field="ca" data-sortable="true">Calcium</th>
</thead>
<tbody>
<tr>
<td>boisson amande gourmande</td>
<td class='sel'>0</td>
<td>0</td>
</tr>
<tr>
<td>boisson amande intense</td>
<td class='sel'>0.025</td>
<td>0</td>
</tr>
<tr>
<td>boisson amande légère</td>
<td class='sel'>0</td>
<td>0</td>
</tr>
<tr>
<td>boisson amande sans sucre</td>
<td class='sel'>0</td>
<td>0</td>
</tr>
<tr>
<td>DOUCEUR AMANDE CHOCOLAT</td>
<td class='sel'>0.08</td>
<td>110</td>
</tr>
<tr>
<td>NUTRI AMANDE PROTÉINES VÉGÉTALES</td>
<td class='sel'>0.06</td>
<td>120</td>
</tr>
</tbody>
</table>
</div>
<script>
$('#sans-sel').on('click', function() {
const elements = document.querySelectorAll('.sel');
Array.from(elements).forEach((element, index) => {
//console.log(element.innerHTML);
if (element.innerHTML != 0) {
if (element.parentNode.style.display === 'none') {
element.parentNode.style.display = 'table-row';
} else {
element.parentNode.style.display = 'none';
}
}
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
https://jsfiddle.net/syu0qvn5/
CodePudding user response：
First off all there is a problem with sorting in Bootstrap Tables. It deletes all classes you've made. So you should write script after tables finish rendering.
In official documentation for Bootstrap tables you can find onPostBody event.
Here: https://bootstrap-table.com/docs/api/events/
After rendering I put script one more time for making rows visible or not. Also I'm checking flag button before it if(document.querySelector('#sans-sel').checked){}.
<html lang='fr'>
<head>
<meta charset="utf-8" />
<meta content="width=device-width" name="viewport" />
<link rel="shortcut icon" href="/img/favicon.ico" type="image/png" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class='container'>
<div data-toggle="buttons">
<label >
<input id='sans-sel' type="checkbox" autocomplete="off"> Without
</label>
</div>
<table class='table table-stripped table-bordered data-sort-name="Nom" data-sort-order="desc"' data-toggle="table">
<thead>
<tr>
<th data-field="Nom" data-sortable="true">Name</th>
<th data-field="sel" data-sortable="true">Sel</th>
<th data-field="ca" data-sortable="true">Calcium</th>
</thead>
<tbody>
<tr>
<td>boisson amande gourmande</td>
<td class='sel'>0</td>
<td>0</td>
</tr>
<tr>
<td>boisson amande intense</td>
<td class='sel'>0.025</td>
<td>0</td>
</tr>
<tr>
<td>boisson amande légère</td>
<td class='sel'>0</td>
<td>0</td>
</tr>
<tr>
<td>boisson amande sans sucre</td>
<td class='sel'>0</td>
<td>0</td>
</tr>
<tr>
<td>DOUCEUR AMANDE CHOCOLAT</td>
<td class='sel'>0.08</td>
<td>110</td>
</tr>
<tr>
<td>NUTRI AMANDE PROTÉINES VÉGÉTALES</td>
<td class='sel'>0.06</td>
<td>120</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script>
$('.table').bootstrapTable({
'onPostBody': () => {
const elements = document.querySelectorAll('.sel');
elements.forEach(function(element, i){
element.parentNode.style.display === 'none';
if(document.querySelector('#sans-sel').checked){
if (element.innerHTML == 0) {
element.parentNode.style.display = 'table-row';
}
else {
element.parentNode.style.display = 'none';
}
}
else {
element.parentNode.style.display = 'table-row';
}
});
},
});
document.addEventListener('click', function(el){
const currentEl = el.target;
if(currentEl && currentEl.id === 'sans-sel'){
const elements = document.querySelectorAll('.sel');
elements.forEach(function(element){
if (element.innerHTML != 0) {
if (element.parentNode.style.display === 'none') {
element.parentNode.style.display = 'table-row';
} else {
element.parentNode.style.display = 'none';
}
}
});
}
});
</script>CodePudding user response：
The table should (is?) databound on sort, or at least redrawing all the rows minus your styles.
Rather than apply styles, apply a filter to the query that limits data rows based on sel content after you click the With-out checkbox.
The best way to keep data hidden is to not include it in the first place. Then you don't have to worry about sorting.