2015-06-17 38 views
2

我正在尋找實現2個網格視圖的JQuery Table Sorter,它們在同一頁上。但我們試圖通過編寫單獨的函數來實現,但它不能正常工作。有人可以幫助我嗎?在同一頁上的2個gridview的jquery Table sorter的問題

對於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,有人可以幫助我如何解決這個請。

+0

我仍然無法弄清楚,爲什麼你不使用內置的tablesorter排序方法。你在[這個問題]中提到了一個教程(http://stackoverflow.com/questions/30744013/jquery-table-sorter-for-two-grid-views-on-the-same-page#comment49581026_30744013),它在哪裏所以我可以打那個人? – Mottie

+0

這兩個函數中的'document.getElementById(「dummyTable」)'都必須表示在頁面的兩個地方有相同的id。其無效 – naveen

+0

嗨..我跟着本教程排序@Mottie http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery- in-ASP.Net.aspx – Knowledge2Share

回答

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' ] 
    }); 

});