Problem using DataTables when generated using XSLT

I'm creating a table using an XSLT transform. I've used DataTables successfully in another project but can't seem to get it right in this case.
The footer doesn't appear in the right place and the table doesn't sort plus when an AJAX update occurs, the table sorting icons and everything is lost.
Here is the part of the xslt that generates the page.

    <table id="tasklist" class="tablesorter">
    <thead>
		<tr class='table-header'>
                    <th style="display:none"></th>
			<th>Entry</th>
			<th>Job</th>
			<th>Department</th>
			<th>Process</th>
			<th>Activity</th>
			<th>Since</th>
			<th>From</th>
                     <th style="display:none"></th>
                     <th style="display:none"></th>
		</tr>
	</thead>
	<tbody> 
	 <xsl:for-each select="task">
        <tr >
            <xsl:attribute name="id">
                <xsl:value-of select="OID" />
            </xsl:attribute>
            <td id="OID" style="display:none;"><xsl:value-of select="OID" /></td>
            <td id="ENTRY_NUMBER"><xsl:value-of select="ENTRY_NUMBER"/></td>
            <td id="JOB_ID"><xsl:value-of select="JOB_ID"/></td>
            <td id="QUEUE_NAME"><xsl:value-of select="QUEUE_NAME"/></td>
            <td id="BUSINESS_PROCESS"><xsl:value-of select="BUSINESS_PROCESS"/></td>
            <td id="JOB_STEP_ID"><xsl:value-of select="JOB_STEP_ID"/></td>
            <td id="CREATION_DATE"><xsl:value-of select="CREATION_DATE"/></td>
            <td id="OWNER"><xsl:value-of select="OWNER" /></td>
            <td id="DATA_URI" style="display:none;"><xsl:value-of select="DATA" /></td>
            <td id="RESULT_OBJ" style="display:none;"><xsl:value-of select="RESULT_OBJ" /></td>
        </tr>
	</xsl:for-each>
	</tbody>
	<tfooter>
		<tr>
                    <th style="display:none"></th>
			<th>Entry</th>
			<th>Job</th>
			<th>Department</th>
			<th>Process</th>
			<th>Activity</th>
			<th>Since</th>
			<th>From</th>
                        <th style="display:none"></th>
                        <th style="display:none"></th>
		</tr>
	</tfooter>
    </table>

I have this in the $(document).ready(function() { ...
header.

   var kounter = 0;
   var auto_refresh = setInterval(function () {
        kounter += 1;
            var theToken = $('#token').text();
            $('#error-div').text('');
            $('#load_me').load("http://localhost:8080/sc_demo/tasklist.jsp?app=Home&process=tasklist&userToken="+theToken
                ).fadeIn("slow");                
	}, 30000); // autorefresh the content of the div after every 30000 milliseconds(30sec) 

   $('#tasklist').dataTable( {
	"sPaginationType": "full_numbers",
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null //put as many null values as your columns
            ]
	}).columnFilter();