相同页面上2个网格视图的jquery分类器问题

Question

我希望实现两个网格视图的JQuery表排序器，它们在同一个页面上。但是我们--我想通过编写单独的函数来实现--它不能正常工作。有人能帮帮我吗。

关于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); };

        }

它不适用于GridView 1，有人能帮我解决这个问题吗？

Answer 1

所链接的教程是用一个固定的标头制作一个表.我开始认为这可能只是ID的一个问题。

我觉得如果没有额外的代码你会更好的。

• 移除虚拟标头
• 去掉额外的css
• 去掉额外的javascript

您所需要的只是加载jQuery、tablesorter主题、tablesorter和tablesorter小部件。

<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>

然后在两个表上初始化tablesorter：

$(function(){

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

});