jquery - 同一页面上 2 个 gridview 的 jquery 表排序器问题

Question

我正在寻找为同一页面上的 2 个 GridView 实现 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 的问题。

我认为，如果没有任何额外的代码，您的情况可能会更好。

• 删除虚拟 header
• 去掉多余的 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' ]
  });

});