Home/ Questions/Q 7161809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T13:37:47+00:00

I am parsing an XML file into a table and want to use the

  • 0

I am parsing an XML file into a table and want to use the jquery tablesorter. Now that I’ve got the error to go away for tablesorter not existing, my data is populating in the table but the headers are not able to be sorted. Any ideas? Code is listed below for JS and HTML.

HTML:

<html> 
<head> 
    <title>Read XML</title> 
    <script type="text/javascript" src="jquery-1.7.1.js"></script>  
    <script type="text/javascript" src="jquery.tablesorter.js"></script> 
    <script type="text/javascript" src="custom.js"></script> 
</head> 
<body> 
    <table id="table" border="1"> 
        <thead> 
            <tr> 
                <th>Item #</th> 
                <th>Shape</th> 
                <th>Weight</th> 
                <th>Color</th> 
                <th>Clarity</th> 
                <th>Price($)</th> 
           </tr> 
        </thead> 
        <tbody> 
        </tbody> 
    </table> 
</body> 
</html>

JS:

$(document).ready(function() { 
$("#table").tablesorter(); 
$.ajax({ 
     type: "GET", 
     url: "tutorial.xml", 
     dataType: "xml", 
     success: parseXml 
}); 
$("#table").trigger("update"); 
}); 

function parseXml(xml) 
{ 
    $(xml).find("diamond").each(function() 
    { 
        $("#table tbody").after("<tr><td>" + $(this).find("id").text() +  
        "</td><td>" + $(this).find("shape").text() + "</td><td>" + $(this).find("weight").text() +  
        "</td><td>" + $(this).find("color").text() + "</td><td>" + $(this).find("clarity").text() +  
        "</td><td>" + $(this).find("price").text() + "</td></tr>"); 
    }); 
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Move this line:

    $("#table").trigger("update");

    to the end of the parseXML method, and change .after to .append

    function parseXml(xml) 
{ 
    $(xml).find("diamond").each(function() 
    { 
        $("#table tbody").append("<tr><td>" + $(this).find("id").text() +  
        "</td><td>" + $(this).find("shape").text() + "</td><td>" + $(this).find("weight").text() +  
        "</td><td>" + $(this).find("color").text() + "</td><td>" + $(this).find("clarity").text() +  
        "</td><td>" + $(this).find("price").text() + "</td></tr>"); 
    }); 
    $("#table").trigger("update");
}
    • 0