設了個定時器，每一秒鐘向后臺請求一次數(shù)據(jù)并刷新tablesorter，同時讓tablesorter以第5列數(shù)字倒序來排列，最多顯示10行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.tablesorter thead tr th{
text-align: center;
}
.tablesorter tbody tr td{
text-align: center;
}
</style>
<title>tablesorter test</title>
<!--jquery-->
<script src="js/jquery-2.1.1.min.js"></script>
<!--tablesorter-->
<script src="js/jquery.tablesorter.js"></script>
<link rel="stylesheet" href="css/theme.blue.css">
<!--bootstrap-->
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$(".table2").tablesorter();
function tableUpdate(data) {
var html = "<tr><td>" + data.devSerial + "</td>";
html += "<td>" + data.createTime + "</td>";
html += "<td>" + data.lastMessageTime + "</td>";
html += "<td>" + data.batteryLevel + "</td>";
html += "<td>" + data.signalStrength + "</td>";
html += "<td>" + JSON.stringify(data.serviceData) + "</td></tr>";
var row_len = $(".table2")[0].rows.length;
if (row_len > 10) {
$(".table2")[0].deleteRow(row_len - 1)
}
// append new html to table body
$(".table2 tbody").append(html);
// let the plugin know that we made a update
$(".table2").trigger("update");
// set sorting column and direction, this will sort on the first and third column
var sorting = [[4, 1]];
// sort on the first column
$(".table2").trigger("sorton", [sorting]);
return false;
}
var getDataInternal = {
url: 'http://xxxxxx',
dataType: 'json',
success: function (res) {
if (res.code == 0) {
tableUpdate(res);
}
},
error: function (res) {
//...
}
};
window.setInterval(
function () {
$.ajax(getDataInternal)
}
, 1000);
})
</script>
</head>
<body>
<div>
<div id="table-dev">
<table id="myTable" class="table2 tablesorter tablesorter-blue" cellpadding="1" width="100%">
<thead>
<tr>
<th width="15%">column1</th>
<th width="10%">column2</th>
<th width="10%">column3</th>
<th width="10%">column4</th>
<th width="10%">column5</th>
<th width="45%">column6</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
