I'm looking to implement JQuery Table Sorter for 2 grid-views, which are on the same page. But we i'm trying to implement by writing separate functions, it is not working properly. Can some one please assist me.
For Gridview 1:
function SortOrderBooks() {
var gwHeader = document.getElementById("dummyTable");
var gwheaders = gwHeader.getElementsByTagName("TH");
gwheaders[6].setAttribute("onclick", "SortBooks(this, 1)");
gwheaders[6].onclick = function () { SortBooks(this, 1); };
gwheaders[6].className = "sortDesc";
}
function SortBooks(cell, sortOrder) {
var sorting = [[cell.cellIndex, sortOrder]];
$("#<%=gvResults.ClientID%>").trigger("sorton", [sorting]);
if (sortOrder == 0) {
sortOrder = 1;
cell.className = "sortDesc";
}
else {
sortOrder = 0;
cell.className = "sortAsc";
}
cell.setAttribute("onclick", "SortBooks(this, " + sortOrder + ")");
cell.onclick = function () { SortBooks(this, sortOrder); };
}
GridView 2:
function SortedTables() {
var gvHeader = document.getElementById("dummyHeader");
var headers = gvHeader.getElementsByTagName("TH");
headers[2].setAttribute("onclick", "Sort(this, 1)");
headers[2].onclick = function () { Sort(this, 1); };
headers[2].className = "sortDesc";
}
function Sort(cell, sortOrder) {
var sorting = [[cell.cellIndex, sortOrder]];
$("#<%=gvTableResults.ClientID%>").trigger("sorton", [sorting]);
if (sortOrder == 0) {
sortOrder = 1;
cell.className = "sortDesc";
}
else {
debugger;
sortOrder = 0;
cell.className = "sortAsc";
}
cell.setAttribute("onclick", "Sort(this, " + sortOrder + ")");
cell.onclick = function () { Sort(this, sortOrder); };
}
It is not working for GridView 1, can someone please assist me how to solve this one please.
The tutorial that was linked is making a table with a fixed header... I'm starting to think that it might just be an issue with IDs.
I think you might be better off without any of that extra code.
All you should need is to load jQuery, tablesorter theme, tablesorter & tablesorter widgets.
Then initialize tablesorter on both tables: