同一页面上 2 个网格视图的 jquery Table 排序器问题

Question

我正在为位于同一页面上的 2 个网格视图实现 JQuery Table 排序器。但是我们试图通过编写单独的函数来实现，它不能正常工作。有人可以帮助我吗？

对于网格视图 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); };

        }

网格视图 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

链接的教程正在制作一个 table 固定 header...我开始认为这可能只是 ID 的问题。

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

删除虚拟 headers
去掉多余的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>

然后在两个 table 上初始化 tablesorter:

$(function(){

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

});

同一页面上 2 个网格视图的 jquery Table 排序器问题

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

jquery

asp.net

sorting

gridview

tablesorter