Jquery 实时数据的设计模式

我有一系列实时事件即将到来。我正在开发一个前端向用户显示此流，以便：

• 用户将能够使用数据中存在的属性之一进行搜索
• 用户将能够对数据进行排序

流中的每个事件都有一个与之关联的状态，该状态可以在任何时候更改，因此我一直在向服务器查询过去x分钟的数据，并在客户端相应地更改状态

我的第一次尝试是使用分页。然而，这导致了以下问题：

• 当用户查看第15页时，比如说，添加了一个新事件，我需要记住用户所在的当前页面，并确保该页面不会更改。即使新添加的数据不会推送太多内容，也会影响事件在列表中的位置，因此用户必须搜索上一个事件移动到的位置
• 当用户按某个特定属性排序时，我需要对传入的数据重新排序并显示它。我仍然面临与上述相同的问题

这种交互有设计模式吗？推特使用。这种模式非常棒，但我不太确定如何适应这种情况：

• 用户可以在其中对数据进行排序
• 我使用后端数据库向前端提供数据。分页查询应该如何设计

---

有什么建议吗

听起来，将排序转移到前端是实现所需结果的最佳方式。我不会深入讨论无限滚动/分页，因为可能有更好的资源，但基本上会跟踪检索到的最后一行（或页面），并将其与您的请求一起发送。希望这有助于解决阻碍您实现该功能的其他问题

旁白：根据数据的实时性，您可能应该研究其他获取数据的方法，如长轮询或WebSocket，而不是每X分钟重复调用一次

响应格式

{
“状态”：“确定”，
“检索到的最后一行”：20，
“事件”：[{
“html”：“常规响应”，
“排序属性1”：10，
...
}]
}

前端

//为每次调用的结果维护一个容器。
var myevents=[]；
$.post（…，函数（响应）{
var data=$.parseJSON（响应）；
var事件=data.events；
对于（var i=0；iI在后端进行常规分页，提供参数pageNum、sortValue等。在前端，我使用无限滚动，其中pageNum简单递增，数据从后端在每个滚动的底部获取。为了排序，我会让前端重置列表，并向后端提供pageNum=1、sortValue=desc，或类似的东西。
{
    'status' : 'OK',
    'last_row_retrieved': 20,
    'events' : [{
        'html' : "<div>The regular response</div>",
        'sort_attr_1' : 10,
        ...
    }]
}

//Maintain a container for the results you get each call.
var myevents = [];
$.post(...,function(response) {
    var data = $.parseJSON(response);
    var events = data.events;
    for(var i=0;i<events.length;i++) {
        //Save each event
        myevents.push(events[i]);
    }
    DisplayEvents();
});
//When user tries to sort do so with custom sorting function
myevents.sort(function(a,b) { return a.sort_attr_1 - b.sort_attr_2;});
DisplayEvents();

function DisplayEvents() {
    //loop through myevents and display them however you're doing it
}