jQuery Mobile XML Parsing into Table

问题

I have just started using the jQuery Mobile framework and wanted to amend what I had originally set up as a grid to a table. The problem I am facing is that I am only getting the first line of data from my XML parse although there is 8 amounts of data to come in.

I am guessing that the grid automatically added a row for each new set it found where by the tabe layout does not and may need some kind of 'each' for every piece of data it finds - I am not sure how to do that if that's the case but if any one can help I'd be very grateful- Thanks.

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Table</title>

    <!--Standard Jquery Stuff here-->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    <!--Set the Icons to be used if saved to an apple home screen-->
    <link rel="apple-touch-icon" href="_/images/iOS_Icons/iPhoneIcon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="_/images/iOS_Icons/iPadIcon.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="_/images/iOS_Icons/iPhoneIcon@2x.png" /> 
    <link rel="apple-touch-icon" sizes="144x144" href="_/images/iOS_Icons/iPadIcon@2x.png" />   

    <!-- Custom css -->
    <link rel="stylesheet" href="../_/css/Michaels.css" />

     <!-- dpv feed-->
          <script type="text/javascript">
              var xml;
              $(document).ready(function(){
                  $.ajax({
                      type: "GET",
                      url: "../_/xml/dpv.xml",
                      dataType: "xml",
                      success: xmlParser
                  });
              });

                  //loading XML file and parsing to .main div.
                  function xmlParser(data) {
                      xml = data;

                      $('#load').fadeOut();

                      $(xml).find("location").each(function () {
                          var name = $(this).find("name").text();
                          var target = $(this).find("target").text();
                          var actual = $(this).find("actual").text();
                          var thru = $(this).find("thru").text();
                          var lastmod = $(this).find("lastmodified").text();

                          $("#dpvtable").append('<tr><th><a href="dpv_graphs/dpv-' + name + '.html" rel="external">'+name+'</a></th><td>' + actual + '</td><td>' + target + '</td><td>' + thru + '</td></tr>');

                          $('#dpvtable').tableview('refresh'); 

                      });
                  }          
          </script>
  </head>
<body>
<!-- DPV -->
<div data-role="page" id="dpv">
    <div data-role="header" data-position="fixed">
        <h1>DPV</h1>
    </div>
    <div data-role="content" data-theme="a" >
        <ul id="table" data-role="tableview">
            <li id="load">Loading Data...</li>
        </ul>
        <table data-role="table" id="dpvtable" data-mode="columntoggle" class="ui-responsive table-stroke">
            <thead>
                <tr>
                    <th>Location</th>
                    <th data-priority="1">DPV</th>
                    <th data-priority="1">Target</th>
                    <th data-priority="2">Thru</th>
                </tr>
          </thead>
       <tbody>

          </tbody>
         </table>
    </div>
</div>
<!--Footer-->
<div data-role="footer" style="text-align:center" data-position="fixed">
    <a class="ui-btn-left" data-icon="home" style="margin: float" href="../index.html" data-transition="flip">Home</a>
</div>
</body>

回答1:

I have figured that coding out or removing:

$('#dpvtable').tableview('refresh');

has put the whole table in place! Now I just need to figure out how to configure it to use the new column hider feature...

来源：https://stackoverflow.com/questions/15381544/jquery-mobile-xml-parsing-into-table

标签

jquery

html

mobile