Suggestions for multipage

Currently jQuery mobile places Drupal content within a single page jQuery mobile page. I have a content type that is a collection of related content pages. I'm seeking to query the Drupal db and present this related content in a jQuery mobile multi-page document. I'm seeking recommendations from people who might have done this before.

A couple of architectural design approaches I'm considering:
- Return JSON and have the webkit client iterate over results and construct multi-page doc.
- Use PHP to iterate over results server-side and send a multi-page doc to the client for rendering.

Eventually I expect the site to have both webkit and native mobile clients, so I initially took the first approach. But my PHP/Drupal skills are much deeper than my jQuery/jQuery Mobile skills, and after running into a wall I'm now trying approach two (maybe I'll come back to approach one later).

My question with the PHP approach is this. To construct the multi-page I'm stepping outside the Drupal API framework. For the specific content type I've created a function which on its first iteration closes off the jQuery Mobile page with a series of

tags, and then on later iterations creates new jQuery mobile "pages". See example code below:

function mymodule_multipage($nid = '0'){
  global $base_url;
  $absPath = $base_url .'/show/' .$nid;
 
  // Fetch the data from the database, ordered by weight ascending.
  // $result
  $select = db_select('node', 'n');
  // build out select object
 // yada yada yada
 $result = $select->execute()->fetchAll();
  
  if (empty($result)) {
      $output = '<p>No items were found.</p>';
    } else {
      $items = array();
      $output =' ';    
      foreach ($result as $key => $item) {
        $pageid = 'page'  .$key;
         
        if($key == 0) {
           $output .= "  <div data-role='header'><h1>" .check_plain($item->title) ."</h1></div>\n"; 
           $output .= "  <div data-role='content'><p>" .check_plain($item->title)  ."</p>\n";
           $output .= "    <a href='#page" .($key + 1) ."' data-role='button' data-inline='true' data-icon='arrow-r'>Next</a>\n";
           $output .= "  </div></div></div></div></div>\n";    
           $output .= "</div><!-- /page -->\n\n";          
        } else {
           $output .= "<!-- Start of $pageid -->\n";
           $output .= "<div data-role='page' id='$pageid' data-title='Item $key' data-url='" .$absPath ."&ui-page=$pageid'>\n";
           $output .= "  <div data-role='header'><h1>" .check_plain($item->title) ."</h1></div>\n"; 
           $output .= "  <div data-role='content'><p>" .check_plain($item->body)  ."</p>\n";
           $output .= "    <a href='#page" .($key - 1) ."' data-role='button' data-inline='true' data-icon='arrow-l'>Previous</a>\n";
           $output .= "    <a href='#page" .($key + 1) ."' data-role='button' data-inline='true' data-icon='arrow-r'>Next</a>\n";
           $output .= "  </div>\n";    
           $output .= "</div><!-- /page -->\n\n";
         };           
      };
    };     
  return $output;
}

I'm still working on getting this solution to work (buttons aren't working) but I suspect this hack is not nearly abstracted (complicated?) enough to be "The Drupal Way." Any thoughts, comments or suggestions on how to execute this better?

NOTE: I'm wanting to use multi-page for smooth page transitions and better network performance, but I'm also concerned about the potential size of the multi-page within the DOM and at what point that will negatively effect client performance. Eventually I suspect that for large 'related content' sets I'll break them into smaller sets. But this a problem for a later day.