TableSorter not working with Ajax

TableSorter not working with Ajax

The TableSorter script looks to be just the ticket for my project. However, I'm having problems getting even basic functionality to work with a table generated by Ajax. I'm running Firebug and am getting no errors.

I have the sort button gif files in all these directories, but they're not showing up: /var/www/html, /var/www/html/amazon, /var/www/html/img. However, TableSorter works fine if I populate the table in HTML. The problems seems to be when populating the table dynamically using Ajax.

My script, css, and xml are attached. I'm an experienced programmer but am somewhat new to JQuery, so it is likely I have done something stupid, but after 6 hours of looking at this I'm drawing a blank.
  1. <!DOCTYPE html PUBLIC "-//W3C//  DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
        <title>Books</title>
        <link href="style.css" rel="stylesheet" type="text/css"></link>
        <script src="../js/jquery.js" type="text/javascript"></script>
        <script src="../js/jquery.tablesorter.js" type="text/javascript"></script>

        <script type="application/javascript">

            $(function() {
                $("#books").tablesorter();
                //         
                $.ajax({
                    type: "GET",
                    url: "liftbooks_test2.xml",
                    dataType: "xml",
                    success: function(xml) {
                    
                        // first, generate table header
                        $('#books').append('<thead><tr><th>Title</th><th>Author</th></tr></thead>');
                        $('#books').append('<tbody>');
                        // parse xml, line-by-line
                        $(xml).find('resource').each(function() {
                        
                            // assign xml elements to javascript vars
                            var title = $(this).find('title').text();
                            var author = $(this).find('author').text();

                            titlecol = '<td>' + title + '</td>';
                            authorcol = '<td>' + author + '</td>';

                            // append row to table
                            $('#books').append('<tr>' + titlecol + authorcol + '</tr>');

                        }); //close each(
                        $('#books').append('</tbody>');
                    }
                }); //close $.ajax(
                
                $('#books').tablesorter({ sortList: [[0,0]] });
            
            }); //close $(
        </script>
        </head>
        <body>
        <p>
        <table id="books" class="tablesorter" border="0" cellspacing="3" cellpadding="2"></table>
        </p>
        </body>
    </html>


















































  1. <?xml version="1.0" encoding="iso-8859-1"?>
    <liftbooks>
    <resource>
    <title>B</title>
    <author>Y</author>
    </resource>
    <resource>
    <title>A</title>
    <author>Z</author>
    </resource>
    </liftbooks>









  1. /* tables */
    table.tablesorter {
        font-family:arial;
        background-color: #CDCDCD;
        margin:10px 0pt 15px;
        font-size: 8pt;
        width: 100%;
        text-align: left;
    }
    table.tablesorter thead tr th, table.tablesorter tfoot tr th {
        background-color: #e6EEEE;
        border: 1px solid #FFF;
        font-size: 8pt;
        padding: 4px;
    }
    table.tablesorter thead tr th .header {
        background-image: url('bg.gif');
        background-repeat: no-repeat;
        background-position: center right;
        cursor: pointer;
    }
    table.tablesorter tbody td {
        color: #3D3D3D;
        padding: 4px;
        background-color: #FFF;
        vertical-align: top;
    }
    table.tablesorter tbody tr.odd td {
        background-color:#F0F0F6;
    }
    table.tablesorter thead tr .headerSortUp {
        background-image: url('asc.gif');
        background-repeat: no-repeat;
        background-position: center right;
    }
    table.tablesorter thead tr .headerSortDown {
        background-image: url('desc.gif');
        background-repeat: no-repeat;
        background-position: center right;
    }
    table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
    }














































Thanks