Bootstrap: data-sort on dynamic table

Question

I have a bootstrap table as follows:

<table id="fullDataTable"
                class="table table-bordered"
                data-toggle="table" 
                data-classes="table"
                data-striped="true"
                data-sort-name="numFrame"
                data-sort-order="desc">
                <thead>
                    <tr>
                            <th class="col-sm-1"
                      data-field="numFrame"
                      data-sortable="true">numFrame</th>
                            <th class="col-sm-1"
                      data-field="timeStamp"
                      data-sortable="false">timeStamp</th>
                            <th class="col-sm-1"
                      data-field="id_robot"
                      data-sortable="false">idRobot</th>
                    </tr>
                </thead>
                <tbody id="dataTable">
                </tbody>
            </table>

The table is then filled dynamically with values from a MySQL database with Javascript:

socket.on('gotDataQuality', function(message) {
if(message == 0){
    alert('No Quality datas for this session');
    clearElement("dataTable");
}else{  
    clearElement("dataTable");
    for (var i = message.length-1; i >= 0; i--) { 
        $('#dataTable').prepend('<tr><td>'+message[i].numFrame+'</td><td>'+message[i].timeStamp+ '</td><td>'+message[i].idRobot+'</td></tr>');
    }
}
});

The table fills correctly but when I attempt to sort it (by clicking on one of the sortable headers) the contents of the table is erased. I'm not entirely sure how the data-sort element works, what can I do to resolve this?

benjamintemitope · Accepted Answer · 2019-02-07 11:27:34Z

You can use List JS

You can make use of this example

 var options = {
  valueNames: [ 'id', 'firstname', 'lastname','username' ]
};

var userList = new List('table', options);

.table [data-sort] {
      cursor: pointer;
  }
  .table [data-sort]::after {
      margin-left: .25rem;
      content: url('data:image/svg+xml;utf8,<svg width=\'6\' height=\'10\' viewBox=\'0 0 6 10\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z\' fill=\'%238898aa\'/></svg>');
  }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div id="table">
  <table class="table">
    <thead>
      <tr>
        <th scope="col" class="sort" data-sort="id">#</th>
        <th scope="col" class="sort" data-sort="firstname">First Name</th>
        <th scope="col" class="sort" data-sort="lastname">Last Name</th>
        <th scope="col" class="sort" data-sort="username">Username</th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <th scope="row" class="id">1</th>
        <td class="firstname">Mark</td>
        <td class="lastname">Otto</td>
        <td class="username">@mdo</td>
      </tr>
      <tr>
        <th scope="row" class="id">2</th>
        <td class="firstname">Jacob</td>
        <td class="lastname">Thornton</td>
        <td class="username">@fat</td>
      </tr>
      <tr>
        <th scope="row" class="id">3</th>
        <td class="firstname">Larry</td>
        <td class="lastname">the Bird</td>
        <td class="username">@twitter</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

CodePen

Collectives™ on Stack Overflow

Bootstrap: data-sort on dynamic table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related