bootstrap-table sort only visible rows

user_1406239 0
Viewed 117

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.0/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 class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary">
          <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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.20.0/dist/bootstrap-table.min.js"></script>

https://jsfiddle.net/syu0qvn5/

tablesort twitter-bootstrap hidden
2 Answers

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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.0/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 class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary">
          <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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.20.0/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>

user_64852490

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.

user_19714380
Related