[jQuery] tableSorter and ajaxSubmit issue
Hello,
My problem so far is to use it in conjunction with an ajaxSubmit
(jquery.form plug-in) which build the table on the fly.
Where and when do I need to fire tableSorter in the process ?
The closer I have been is in the code below
by firing tableSorter twice: once before building the table and once
after.
But sorting the table by any column is working only the first time.
Subsequent requests result in a table which is sortable on firdt
column only.
Any Idea ?
Thank you and have a good day,
Olivier.
### CODE START ###
<html>
<head>
<title>WIPOSoft</title>
<link rel="stylesheet" type="text/css" href="/wiposoft/media/css/
changelists.css" />
<script type="text/javascript" src="/wiposoft/site_media/js/
jquery.js"></script>
<script type="text/javascript" src="/wiposoft/site_media/js/
jquery.tablesorter.js"></script>
<script type="text/javascript" src="/wiposoft/site_media/js/
jquery.form.js"></script>
<script>
function sortTable() {
$('#simple-init-sort').tableSorter({
sortColumn: 'name',
sortClassAsc: 'sorted ascending',
sortClassDesc: 'sorted descending',
stripingRowClass: ['row1','row2']
});
};
/*$(document).ready(function() {
* sortTable();
*});
*/
function showReport()
{
var options = {
beforeSubmit: sortTable(),
dataType: "json",
success: function(json){
$('#applReport').empty();
$.each(json,
function(i) {
if (this.content != 'none')
{
$('#applReport').append('<tr><td>'+this.name+'</
td><td>'+this.nds_distrib+'</td><td>'+this.business_unit+'</td></
tr>');
}
}
);
sortTable();
}
};
$('#reportForm').ajaxSubmit(options);
};
</script>
</head>
<body class="change-list">
<div id="container">
<div id="content" class="flex">
<form id="reportForm" method="post" action="/wiposoft/
ApplicationReport/" onsubmit="showReport();return false;">
<table>
<tr><th><label for="id_nds_distrib">NAL distrib:</label></
th><td><select name="nds_distrib" id="id_nds_distrib">
<option value="1" selected="selected">Unknown</option>
<option value="2">Yes</option>
<option value="3">No</option>
</select></td></tr>
<tr><th><label for="id_business_unit">Business unit:</label></
th><td><select name="business_unit" id="id_business_unit">
<option value="0">- All -</option>
<option value="16">CIO's Office</option>
<option value="17">CIO's Office Team</option>
</select></td></tr>
</table>
<input type="submit" name="applReport" value="Show"/>
</form>
<table cellspacing="0" id="simple-init-sort">
<thead><tr>
<th>Name</th>
<th>NAL distrib</th>
<th>Business Unit</th>
</tr></thead>
<tbody id="applReport">
</tbody>
</table>
</div>
</div>
</body>
</html>