7

I have a stream of real-time events coming in. I am developing a front-end to display this stream to a user so that:

  • User will be able to search using one of the attributes present in the data
  • User will be able to sort the data

Each event in the stream has a state associated with it which can be changed at any point so I keep querying the server for the last x minutes worth of data and change the state accordingly on the client-side.

My first attempt was using pagination. However, this has been giving rise to the following problems:

  • When the user is viewing say, the 15th page and a new event gets added, I need to remember the current page the user is at and make sure that does not change. Even if the newly added data does not push things too much, it will affect the position of the event in the list and hence the user has to search where the previous event has moved to.
  • When the user sorts by some particular attribute, I need to re-sort the incoming data and display it. I still face the same problem as above.

Is there a design pattern for this interaction? Twitter uses infinite scrolling. This pattern is awesome but I am not quite sure how to adapt it to situations:

  • Where the user can sort the data.
  • Where I am using a back-end database to provide data to the front-end. How should the pagination queries be designed?

Any suggestions?

4

1 回答 1

0

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

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

响应格式

{
    '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
}
于 2013-07-02T17:22:37.287 回答