js实现table表格动态更新数据并排序的思路
- 加载页面
即window.onload = function () {}。 - 获取服务器端缓存数据，初始化表格内容
第一步加载完成后，通过Ajax发起http请求，将服务器端的json数据转换成js对象，传回页面，填充表格table的初始内容，即各行id，name，num的值。 - 建立websocket连接，实现服务器端数据改变，前端页面实时更新表格内容
在websocket对象的onopen函数中利用定时器向服务器端每隔2秒发送1-50内的随机数，onmessage函数中，服务器端返回前端页面相同随机数数据。前端代码将服务器实时改变的随机数实现排序并填充表格table。num数值小的在上面，大的在下面。 - js实现表格排序
前端代码每次接收服务器端传过来的json数据ids，都将其转换成js对象ids，然后修改全局变量list.num的值。新建数组displayList，并将修改后的list内容填入数组，调用sort函数将list.num进行排序，再调用全局函数DisplayList填充表格table。
最终效果图
WebSocket服务器端代码（GO语言）
博文链接：https://blog.csdn.net/weixin_43757001/article/details/90116651
package main
import (
"fmt"
"net/http"
"github.com/gorilla/websocket"
"github.com/labstack/echo"
"github.com/labstack/echo/middleware"
)
var (
upgrader = websocket.Upgrader{
}
)
func main() {
e := echo.New()
// e.Use(middleware.Logger())
e.Use(middleware.Recover())
e.Static("/", "./")
e.GET("/hello", func(c echo.Context) error {
return c.String(http.StatusOK, "Hello, World!")
})
e.GET("/echo", getEcho)
e.POST("/echo", postEcho)
e.GET("/list", func(c echo.Context) error {
type Camera struct {
ID string `json:"id"`
Name string `json:"name"`
Num int `json:"num"`
}
type List struct {
List []Camera `json:"list"`
}
list := new(List)
c1 := Camera{
"001", "camera1", 10}
c2 := Camera{
"002", "camera2", 20}
c3 := Camera{
"003", "camera3", 30}
list.List = append(list.List, c1)
list.List = append(list.List, c2)
list.List = append(list.List, c3)
return c.JSON(http.StatusCreated, list)
})
e.GET("/ws", wsEcho)
e.Logger.Fatal(e.Start(":8800"))
}
func wsEcho(c echo.Context) error {
ws, err := upgrader.Upgrade(c.Response(), c.Request(), nil)
if err != nil {
return err
}
defer ws.Close()
// Write
err = ws.WriteMessage(websocket.TextMessage, []byte("Hello, Client!"))
if err != nil {
c.Logger().Error(err)
}
for {
// Read
_, msg, err := ws.ReadMessage()
if err != nil {
c.Logger().Error(err)
}
fmt.Printf("wsEcho:%s\n", msg)
// Write
err = ws.WriteMessage(websocket.TextMessage, []byte(msg))
if err != nil {
c.Logger().Error(err)
}
}
}
// get url /echo?str="xxxxx"
func getEcho(c echo.Context) error {
str := c.QueryParam("str")
return c.String(http.StatusOK, str)
}
// post url /echo with body form value "str"
func postEcho(c echo.Context) error {
str := c.FormValue("str")
return c.String(http.StatusOK, str)
}
由以上可以看出，服务器端储存着json数据
{
"list":[
{
"id":"001","name":"camera1","num":10},
{
"id":"002","name":"camera2","num":20},
{
"id":"003","name":"camera3","num":30}
]
}
html代码
<body>
<div>
<table id="customers">
<tr id="one">
<th>id</th>
<th>name</th>
<th>num</th>
</tr>
<tr>
<td></td>
<!--id_one-->
<td></td>
<!--name_one-->
<td></td>
<!--num_one-->
</tr>
<tr class="alt">
<td></td>
<!--id_two-->
<td></td>
<!--name_two-->
<td></td>
<!--num_two-->
</tr>
<tr>
<td></td>
<!--id_three-->
<td></td>
<!--name_three-->
<td></td>
<!--num_three-->
</tr>
</table>
</div>
</body>
css代码
<style type="text/css">
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customers td,
#customers th {
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#customers th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
#customers tr.alt td {
color: #000000;
background-color: #EAF2D3;
}
</style>
js代码
<script type="text/javascript">
var list = {
}; //list对象储存各行id，name，num的值
//遍历displayList数组，将数组中的数据传回页面，填充table表格各行id，name，num的值
function DisplayList(displayList) {
var customers = document.getElementById("customers");
displayList.forEach(function (obj, i) {
customers.rows[i + 1].cells[0].innerHTML = obj.id;
customers.rows[i + 1].cells[1].innerHTML = obj.name;
customers.rows[i + 1].cells[2].innerHTML = obj.num;
})
}
window.onload = function () {
//Ajax获取后台id，name，num的值
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
console.log(xmlhttp);
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
console.log('xmlreadyState:' + xmlhttp.readyState);
console.log('xmlstatus:' + xmlhttp.status);
if (xmlhttp.readyState == 4 && xmlhttp.status == 201) {
//初始化table内容
//将服务器端json数据转成js对象，传回前端页面
var json = xmlhttp.responseText;
console.log(json);
var jsonToJs = JSON.parse(json);
console.log(jsonToJs);
//填充list对象的内容，准备初始化table内容，注意此处list对象的索引为jsonToJs.list[i]的id值，而非常规的从0开始的索引号
for (var i = 0; i < jsonToJs.list.length; i++) {
list[jsonToJs.list[i].id] = jsonToJs.list[i];
console.log(jsonToJs.list[i]);
}
console.log(list);
DisplayList(jsonToJs.list);//初始化table内容
//建立websocket连接
var ws = new WebSocket("ws://127.0.0.1:8800/ws");
var interval_num;
function sortDisplayList(a, b) {
return a.num - b.num;
}
ws.onopen = function () {
console.log("open");
function rnd(n, m) {
var random = Math.floor(Math.random() * (m - n + 1) + n);
return random;
}
interval_num = setInterval(function () {
var ids = {
};
ids["001"] = rnd(1, 50);
ws.send(JSON.stringify(ids));
}, 2000);
};
ws.onmessage = function (evt) {
if (evt.data.indexOf("Hello") != -1) {
return;
}
var ids = JSON.parse(evt.data);
list["001"].num = ids["001"];
var displayList = new Array();
for (id in list) {
displayList.push(list[id]);
}
displayList.sort(sortDisplayList);
DisplayList(displayList);
};
ws.onclose = function (evt) {
console.log("WebSocketClosed!");
};
ws.onerror = function (evt) {
console.log("WebSocketError!");
};
}
}
xmlhttp.open("GET", "http://127.0.0.1:8800/list", true);
xmlhttp.send();
}
</script>