我有一个引导表,如下所示:
<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>
然后使用Javascript从MySQL数据库动态填充表:
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>');
}
}
});
该表已正确填充,但是当我尝试对其进行排序(通过单击可排序的标题之一)时,该表的内容将被删除。我不确定data-sort
元素的工作方式,该怎么解决?
答案 0 :(得分:1)
您可以使用List JS
您可以利用此示例
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>