This was due, it turns out, to 2 things:
1. I had a hidden/openable div in one of the table cells;
2. I didn't have the update call after the ajax return.
IMPORTANT: TO SEE FULL CODE, CUT AND PASTE. STUPID LAYOUT OF THIS BLOG. The text/code is really there, the viewable div below prevents it from displaying. Just cut and paste the code fragments below to see the full code...
So, step one:
function actionCount() {
$.ajaxSetup({
cache: false,
type: "POST",
success: function(html) {
$("#myprojectstable").trigger("update");
// console.log("Inside Success function..");
}
});
var orgid = $("#orgID").val();
var projidlist = <%= self.fields.projidlist %>;
$.post("ActionsCountJSON", { projids: projidlist }, function(raw){
var rawData = raw['resultSet'];
var rawList = raw['resultListing'];
for (f in rawData) {
var divloc = "#pActionsProjid" + f;
var divobj = $(divloc);
divobj.html(rawData[f]);
divloc = "#pActionDataProjid" + f;
var divobj = $(divloc);
divobj.html(rawList[f]);
};
$("#myprojectstable").trigger("sorton", [0,0]);
$("#myprojectstable").trigger("applyWidgets");
$("#myprojectstable").trigger("update");
//console.log("done with AJAX POST.");
//stripe("myprojectstable");
}, 'json');
}
Having the update there made the widget trigger after the ajax returned, a vital thing because otherwise tablesorter doesn't know the underlying data has changed. After I had this, it resorted after the ajax came back.
Next, I had a widgets: [zebra] in my document ready function, but this widget wasn't working right.
So, I replaced it with my own widget by specifying widgets: ['zebraKJR']
then creating that widget as:
$.tablesorter.addWidget(
{
id: "zebraKJR",
format: function(table)
{
var even = false;
// console.log("zebraKJR called.");
// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#fff";
var oddColor = arguments[2] ? arguments[2] : "#cde4ff";
if(table.config.debug) { var time = new Date(); }
//var tbody = $("tr:visible",table.tBodies[0]);
// by definition, tables can have more than one tbody
// element, so we'll have to get the list of child
// <tbody>s
var tbodies = table.getElementsByTagName("tbody");
// and iterate through them...
// for (var h = 0; h < 1tbodies.length; h++) {
for (var h = 0; h < 1; h++) {
// find all the <tr> elements...
var trs = tbodies[h].getElementsByTagName("tr");
// ... and iterate through them
for (var i = 0; i < trs.length; i++) {
if (trs[i].id != 'stripeMe') {
// console.log("SKIPPING thru tr's, h="+h+", i="+i+", len="+trs.length+", trs data:"+trs[i].id); //innerHTML
continue;
}
// console.log("COLORING thru tr's, h="+h+", i="+i+", len="+trs.length+", trs data:"+trs[i].id); //innerHTML
trs[i].style.backgroundColor = even? evenColor : oddColor;
// avoid rows that have a class attribute
// or backgroundColor style
if (true) { //(! hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
// get all the cells in this row...
var tds = trs[i].getElementsByTagName("td");
// and iterate through them...
for (var j = 0; j < tds.length; j++) {
var mytd = tds[j];
// avoid cells that have a class attribute
// or backgroundColor style
if (true) { //(! hasClass(mytd) &&! mytd.style.backgroundColor) {
mytd.style.backgroundColor = even ? evenColor : oddColor;
}
}
}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}
});
That's it!
I also have a parser method for parsing text out of HTML tags:
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'noUrlSorter',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
beforeString = trim(s);
t1 = s;
t2 = t1.replace(/\"/ig,"");
t3 = t2.replace(/(<([^>]+)>)/ig,"");
t4 = t3.toLowerCase();
//alert(" t1="+t1+
// ",t2="+t2+
// ",t3="+t3+
// ",t4="+t4);
//console.log("parsing, b4="+beforeString+", returning: "+t4);
return t4
},
// set type, either numeric or text
type: 'text'
});
