I have a PHP file that calls a JS file. The PHP has two tables that use the table sorter plugin, one works and one doesn't. The one that works comes straight from an Ajax call, the one that doesn't is populated with information from the same Ajax call as well as some js var. I am able to sort by columns that are filled by Ajax return, but I am unable to sort by the 4 columns (Code, QtyOrder, $, Comments) which are filled by JS variable values and are editable. I am using PHP 5.3.24 and jqueryui/1.10.0, is it possible to sort by editable and js filled columns and if so how?
thanks
$(document).ready(function() {
$('#loading').hide();
$("#guides").tablesorter();
$("#inv").tablesorter();
function populate(cnt) {
$("#cheggNote").hide();
$("#getting").hide();
$("#getting").hide();
$("#getting2").hide();
$("#getting3").hide();
$("#getting4").hide();
$("#guides tbody").remove();
$("#inv tbody").remove();
$("#detailSales tbody").remove();
$("#detailSales2 tbody").remove();
var po = $('#po').val();
$.ajax({
type: "POST",
url: "poInfo2.php",
//async:false,
dataType: "json",
data: ({
po: po,
filter: $('#filter').val(),
cnt: cnt,
end: $('#end').html()
}),
success: function(data) {
var isbn = data.isbn;
$("#qtyA").val(data.qty);
$("#price").val(data.price);
$("#priceOffered").val(data.pr_off);
$("#title").val(data.title);
$("#isbn10").val(data.isbn10);
$("#publisher").val(data.Publisher);
$("#copy").val(data.Copyright);
$("#weight").val(data.Weight);
$("#isbn13").val(data.isbn);
$("#list").val(data.list);
$("#AmzLow").val(data.AmzLow);
$("#AmzNewPrice").val(data.AmzNew);
$("#Rank").val(data.Rank);
$("#source").val(data.source);
$("#end").html(data.pages);
$("#start").html(cnt + 1);
if (data.isbn == null) {
$("#guides").append('<tr><td>No Records Found</td></tr>');
$("#inv").append('<tr><td>No Records Found</td></tr>');
} else {
for (var x = 0; x < data.PurPO.length; x++) {
$("#inv").append('<tr><td id=tableDATE>' + data.PurDate[x] + '</td><td id=tablePO>' + data.PurPO[x] +
'</td><td id=tableQtyOrdered>' + data.PurQty[x] + '</td><td id=tablePrice>' + data.PurPrice[x] + '</td></tr>');
}
$("#inv").trigger("update");
$("#guides").append('<tr><td>' + data.AMGprice + '</td><td>Amtext</td><td><input type="text" class="qty" id="ACode" value="' + data.ACode +
'"</td><td><input type="text" class="qty" id="AQty" value="' + data.AQty +
'"</td><td id="ANewPricemarg">' + ANewPricemarg + '</td><td><input type="text" class="qty" id="ANewPrice" value="' + data.ANewPrice +
'"</td><td><input type="text" class="qty" id="Acomments" value="' + data.Acomments +
'"/></td><td class="price">' + data.Atitle +
'</td></tr><tr><td>' + data.FGnew + '</td><td>Follett N</td><td><input type="text" class="qty" id="FNewCode" value="' + data.FNewCode +
'"</td><td><input type="text" class="qty" id="FNewQty" value="' + data.FNewQty +
'"</td><td id="FNewmarg">' + FNewmarg + '</td><td><input type="text" class="qty" id="FNew" value="' + data.FNew +
'"</td><td><input type="text" class="qty" id="Fcomments" value="' + data.Fcomments +
'"/></td><td class="price">' + data.Ftitle +
'</td></tr><tr><td>' + data.FGused + '</td><td>Follett U</td><td><input type="text" class="qty" id="FUsedCode" value="' + data.FUsedCode +
'"</td><td><input type="text" class="qty" id="FUsedQty" value="' + data.FUsedQty +
'"</td><td id="FUsedPricemarg">' + FUsedPricemarg + '</td><td><input type="text" class="qty" id="FUsedPrice" value="' + data.FUsedPrice +
'"</td><td><input type="text" class="qty" id="FUsedcomments" value="' + data.FUsedcomments +
'"/></td><td class="price">' + data.Ftitle +
'</td></tr><tr><td>' + data.NEBGPrice + '</td><td>Nebraska</td><td></td><td><input type="text" class="qty" id="NQty" value="' + data.NQty +
'"</td><td id="NPricemarg">' + NPricemarg + '</td><td><input type="text" class="qty" id="NPrice" value="' + data.NPrice +
'"</td><td><input type="text" class="qty" id="Ncomments" value="' + data.Ncomments +
'"</td><td></td></tr><tr><td>' + data.BWGNewPrice +
'</td><td>BkWin N</td><td><input type="text" class="qty" id="BWCode" value="' + data.BWCode +
'"</td><td><input type="text" class="qty" id="BWQty" value="' + data.BWQty +
'"</td><td id="BWmarg">' + BWmarg + '</td><td><input type="text" class="qty" id="BW" value="' + data.BW +
'"</td><td><input type="text" class="qty" id="BWcomments" value="' + data.BWcomments +
'"</td><td></td></tr><tr><td>' + data.BWGPrice +
'</td><td>BkWin U</td><td><input type="text" class="qty" id="BWCodeU" value="' + data.BWCodeU +
'"</td><td><input type="text" class="qty" id="BWQtyU" value="' + data.BWQtyU +
'"</td><td id="BWUmarg">' + BWUmarg + '</td><td><input type="text" class="qty" id="BWU" value="' + data.BWU +
'"</td><td><input type="text" class="qty" id="BWUcomments" value="' + data.BWUcomments +
'"</td><td></td></tr><tr><td>' + data.BKBGPrice +
'</td><td>BookByte</td><td><input type="text" class="qty" id="BKBCode" value="' + data.BKBCode +
'"</td><td><input type="text" class="qty" id="BKBQty" value="' + data.BKBQty +
'"</td><td id="BKBmarg">' + BKBmarg + '</td><td><input type="text" class="qty" id="BKB" value="' + data.BKB +
'"</td><td><input type="text" class="qty" id="BKBcomments" value="' + data.BKBcomments +
'"</td><td></td></tr><tr><td></td><td>F Qoute N</td><td><input type="text" class="qty" id="FquoteNewCode" value="' + data.FQuoteNewCode +
'"</td><td><input type="text" class="qty" id="FQuoteNewQty" value="' + data.FQuoteNewQty +
'"</td><td id="FQuoteNewmarg">' + FQuoteNewmarg + '</td><td><input type="text" class="qty" id="FQuoteNew" value="' + data.FQuoteNew +
'"</td><td id="FQuoteNewmarg><input type="text" class="qty" id="FQNcomments" value="' + data.FQNcomments + '"/></td><td class="price">' + data.FQtitle +
'</td></tr><tr><td></td><td>F Qoute U</td><td><input type="text" class="qty" id="FQuoteUsedCode" value="' + data.FQuoteUsedCode +
'"</td><td><input type="text" class="qty" id="FQuoteUsedQty" value="' + data.FQuoteUsedQty +
'"</td><td id="FQuoteUsedmarg">' + FQuoteUsedmarg + '</td><td><input type="text" class="qty" id="FQuoteUsed" value="' + data.FQuoteUsed +
'"</td><td><input type="text" class="qty" id="FQUcomments" value="' + data.FQUcomments + '"/></td><td class="price">' + data.FQtitle +
'<td></tr><tr><td></td><td>Valore</td><td></td><td><input type="text" class="qty" id="VLRQty" value="' + data.VLRQty +
'"</td><td id="VLRmarg">' + VLRmarg + '</td><td><input type="text" class="qty" id="VLR" value="' + data.VLR +
'"</td><td><input type="text" class="qty" id="VLRcomments" value="' + data.VLRcomments +
'"</td><td></td><tr><td></td><td>Bkscouter</td><td></td><td><input type="text" class="qty" id="Bookscouter1Qty" value="' + data.Bookscouter1Qty +
'"</td><td id="Bookscouter1marg">' + Bookscouter1marg + '</td><td><input type="text" class="qty" id="Bookscouter1" value="' + data.Bookscouter1 +
'"</td><td><input type="text" class="qty" id="BKScomments" value="' + data.BKScomments +
'"</td><td></td><tr><td></td><td>Recycle</td><td></td><td><input type="text" class="qty" id="ScoutRecycleQty" value="' + data.ScoutRecycleQty +
'"</td><td id="ScoutRecyclemarg">' + ScoutRecyclemarg + '</td><td><input type="text" class="qty" id="ScoutRecycle" value="' + data.ScoutRecycle +
'"</td><td><input type="text" class="qty" id="Recycomments" value="' + data.Recycomments +
'"</td><td></td></tr><tr><td></td><td>Bks Amz</td><td></td><td><input type="text" class="qty" id="ScoutAmzQty" value="' + data.ScoutAmzQty +
'"</td><td id="ScoutAmzmarg">' + ScoutAmzmarg + '</td><td><input type="text" class="qty" id="ScoutAmz" value="' + data.ScoutAmz +
'"</td><td><input type="text" class="qty" id="AMZcomments" value="' + data.AMZcomments +
'"</td><td></td></tr><tr><td></td><td>McKenzie</td><td></td><td><input type="text" class="qty" id="McKenzieQty" value="' + data.McKenzieQty +
'"</td><td id="MCKmarg">' + MCKmarg + '</td><td><input type="text" class="McKenzie" id="McKenzie" value="' + data.McKenzie +
'"</td><td><input type="text" class="qty" id="MCKcomments" value="' + data.MCKcomments +
'"</td><td></td></tr>');
var shipweight = document.getElementById("weight").value;
} //END OF ELSE
$("#cnt").val(data.cnt);
$("#guides").trigger("update");
} // END OF SUCCESS
}); //END OF AJAX
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="inventory" class="noprint">
<table id="inv" class="tablesorter" style="border: 1px solid black;">
<caption class="cap">Order History</caption>
<thead>
<tr>
<th>DATE</th>
<th>PO</th>
<th>QtyOrdered</th>
<th>Price</th>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--INVENTORY-->
<div id="guide">
<table class="tablesorter" id="guides" style="border: 1px solid black;">
<thead>
<tr>
<th>Current</th>
<th>Guide</th>
<th>Code</th>
<th>QtyOrder</th>
<th>Margin</th>
<th>$</th>
<th>Comments</th>
<th>Title</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<!--GUIDE-->for anyone with the same issues it is possible in the new version of tablesorter , jut update the tablesorter and you are good to go.