2

I am using jquery to get xml data into html (table). ( classical Javascript coding only work if you are doint it through a webserver but I am currently not interested in to work on a webserver.

The call function to read my xml data works fine(in Firefox only ) I would like alos to make use of the tablesorter jquery plugin. Unfortunatly, when I use it it doesn't work...Any clue on what could be wrong with code ? Is it perhaps I am using tablesorter in the wrong place..? Any alternative of proceeding is welcome (bear in mind that I am not working on a webserver).

here is the link of tablesorter plugin: home page tablesorter

the data called sites:

  <?xml version="1.0" encoding="ISO-8859-1" ?> 
   <root>
    <snapshot>
     <order>1</order> 
     <screen>1</screen> 
     <randomised>0</randomised> 
    </snapshot>
    <snapshot>
     <order>2</order> 
     <screen>2</screen> 
     <randomised>1</randomised> 
    </snapshot>
  </root>

the code has two calls one for calling tablesorter plugin and one to read xml data using jquery

<!DOCTYPE html>
<html>
 <head>
 <style>
    table, th, td {
    border: 1px solid black;
    border-collapse:collapse;
    }
   th, td {
    padding: 5px;
   }
</style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"type="tex/javascript"></script>
<script src="js/jquery.tablesorter.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-latest.js"></script> 


<script>
 //initialise my html table below for get ready to do sorting by calling tablesorter plugin
$(document).ready(function() 
    { 
        $("#metrics").tablesorter(); 
    } 
); 
//import xml data into html
$(document).ready(function(){
 $.ajax({
  type: "GET",
  url: "sites.xml", 
  dataType: "xml",
  success: function(xml) {  


   $(xml).find('snapshot').each(function(){ 
    var Cl0 = $(this).find("order").text();
    var Cl1 = $(this).find("screen").text();
    var Cl2 = $(this).find("randomised").text();
    $('<tr></tr>').html('<td>'+Cl0+'</td><td>'+Cl1+'</td><td>'+Cl2+'</td>').appendTo('#metrics');
   });
  }
 });
 });

</script>
</head>

<body>
      <p>This is my table.</p>
 <table id="metrics" class="tablesorter" >
  <tr><th>Order</th><th>screen</th><th>randomised</th></tr>
 </table>
</body>
</html>

Cheers

saskap

sas_kappel
  • 61
  • 1
  • 9

1 Answers1

1

Here you go, mate: Parse XML using JavaScript https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML

Community
  • 1
  • 1
overburn
  • 1,194
  • 9
  • 27
  • Also, make sure to use `$("#metrics").trigger('update');` *after* the new content is added to the table (after the `.each()` function). – Mottie Aug 18 '15 at 02:14