将ajaxed数据分配到分页数据中,以及最佳方法吗?

时间:2012-10-19 23:47:09

标签: javascript jquery

所以,我问的是如何为我出现的问题创建适当的概念/解决方案。我很确定我是一个掩护它,但在与这里的一些人交谈之后,我发现不仅有一种方法可以给猫皮肤,更常见的是 - 更好。洛尔。

所以,我有一些数据来自..通过ajax调用。太好了。所有这些都捆绑在一个我认为创建页面分页的篮子里。

例如,我得到了一个包含4个项目的桶,我的页面每页2个..等于2页。我只构建了一个分页点击的页面..我有数据,但后来我构建了它。 (为了下面的例子)。

所以这是我的问题。我有第二组数据,我必须检索(它是一个单独的ajax调用),第二组数据可能将附加数据附加到第一组项目。

即使他们的显示器尚未构建,如何最好地将第二组映射到第一组。

所以, - 为了争论,我得到了我刚收到的第一组数据。可以说每页只有2个项目。

总的来说,我的第一个桶有以下数据:

data = [
{name:ITEM1, desc: Greatest Book in History, id: 98987 },
{name:ITEM2, desc: Second Greatest Book in History, id: 76557 },
{name:ITEM3, desc: Third Greatest Book in History, id: 121212 },
{name:ITEM4, desc: Fourth Greatest Book in History, id: 09546 }

第一页。


ITEM 1 - Greatest Book in history
ITEM 2 - Second Greatest Book in history

点击分页


ITEM 3 - Third Book in history (**special sale: Special Edition**)
ITEM 4 - Fourth Greatest Book in history

现在,我的第二个数据有以下

specialData = [    {121212:特价促销:特别版} ]

所以,第二个ajax调用将发送我的所有First Bucket IDS并返回任何" new"可用的信息。如果有,我会在显示屏上附上新数据。

现在,我的猜测是:

1)。等待第二个请求完成,然后使用第二组信息附加第一个桶数据,因此当我构建分页时,数据是在请求分页时构建的。

2)。正常构建第一桶数据,然后应用与项目ID号相同的*元素ID *。当获取第二个数据桶时,我使用新信息附加到html元素id。那就是我找到合适的匹配方式。唯一的问题是,我必须知道在添加新信息之前,存在特定的元素ID dom项目(可见/构建到当前分页页面)。

<div>ITEM 3 - Third Book in history<span id="121212"></span></div>

我在这里缺少什么?这比我做的简单吗?

1 个答案:

答案 0 :(得分:1)

对于清洁度和JavaScript提供的数据结构的性质,我可能会采用第二种方法。鉴于您已使用jQuery标记了问题,这是一个实现。

    var dataBucket = {};
    function enrichBucket(incomingData) {
        for(var i = 0, len = incomingData.length; i < len; i++) {
            var dataEntry = incomingData[i];
            dataBucket[dataEntry.id] = $.extend( dataBucket[dataEntry.id]||{}, dataEntry);
        }
    }

http://api.jquery.com/jQuery.extend/如果要进行深度合并,请查看[deep]标志。