Issues with jquery Table sorter for 2 gridview on the same page

Question

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.

Answer 1

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.

• Remove the dummy headers
• Get rid of the extra css
• Get rid of the extra javascript

All you should need is to load jQuery, tablesorter theme, tablesorter & tablesorter widgets.

<link href="../css/theme.blue.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>

Then initialize tablesorter on both tables:

$(function(){

  $("#<%=GridView1.ClientID%>, #<%=GridView2.ClientID%>").tablesorter({
    theme : "blue",
    widgets : [ 'zebra', 'stickyHeaders' ]
  });

});