js实现table表格动态更新数据并排序

最新推荐文章于 2025-03-27 00:18:44 发布

lseap

最新推荐文章于 2025-03-27 00:18:44 发布

阅读量1w

点赞数 3

分类专栏： JavaScript 文章标签： JavaScript 表格排序

本文链接：https://blog.youkuaiyun.com/weixin_43757001/article/details/90526232

版权

本文介绍如何使用JavaScript实现实时从WebSocket服务器获取数据，动态更新HTML表格内容并进行排序。首先，页面加载后通过Ajax请求初始化表格，然后建立WebSocket连接，服务器每2秒返回随机数，前端接收到数据后进行排序并展示。最后展示了GO语言实现的WebSocket服务器代码，以及HTML、CSS和JS的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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()

最低0.47元/天解锁文章