Assigning ajaxed data into paginated data, and best way to go about it?
<p>So, I am asking about how to create the appropriate concept/solution for a problem I have coming up. I am pretty sure I an cover it, but after talking with some on here, I see there are more than one way to skin a cat, and more often - better. lol.</p>

<p>So, I have some data coming in.. via ajax call. Ok great. That all gets bundled in a basket that I think create page paginations. </p>

<p>For instance, I get a bucket of 4 items, and my pagination is 2 per page.. equals 2 pages. I only build the pages one pagination is clicked.. I have the data, but then I build it out. (for the sake of the example below).</p>

<p>So here is my issue. I have a second set of data that i must retrieve (it is a seperate ajax call) and that second set of data <em>might</em> append additional data to the first set of items.</p>

<p>How best to map that second set to the first even when their display is not built yet.</p>

<p>So, - for the sake of argument, I have my first set of data that i just received. Lets say there is only 2 items per page.</p>

<p>In total, my first bucket has the following data:</p>

<pre><code>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 }
</code></pre>

<p>]</p>

<p>page one.</p>

<hr>

<pre><code>ITEM 1 - Greatest Book in history
ITEM 2 - Second Greatest Book in history
</code></pre>

<hr>

<p>Page 2 pagination is clicked</p>

<hr>

<pre><code>ITEM 3 - Third Book in history (**special sale: Special Edition**)
ITEM 4 - Fourth Greatest Book in history
</code></pre>

<p>Now, my second second data has the following</p>

<p>specialData = [
   {121212 :  special sale: Special Edition}
]</p>

<p>So, the second ajax call is gonna send all my First Bucket IDS and get returned any "new" information that is available. If there is, I am gonna append the display with the new data.</p>

<p>Now, my guess to do this is:</p>

<p>1). Wait for the second request to finish then append the first bucket data with the second set of info, so when I build out the pagination, the data is there gets build as pagination is requested.</p>

<p>or</p>

<p>2). Build the first bucket of data as normal and then apply an * element id * that is the same as the item id number.... and when the second data bucket is fetched, I append to the html element id with the new info.. that is how I find the appropriate match. THe only thing is, I have to know that that particular element ID dom item is present (visible/built to the current pagination page) before I can append that new info.</p>

<pre><code>&lt;div&gt;ITEM 3 - Third Book in history&lt;span id="121212"&gt;&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>What am I missing here? Is this simpler than I am making it?</p>
