自定義數據表排序使用jquery升序和降序

Question

我有以下數據表，單獨排序升序和降序按鈕。 我使用jQuery插件 「jQuery.fn.sort」 James Padolsey

這裏是工作示例

http://jsbin.com/alawub/2/edit

我要添加排序，以每上校，但它不工作請回顧我的JS代碼高於任何其他替代解決方案，這是值得歡迎的。

Answer 1

您要添加的單擊處理過很多次：

$('th') 
    .wrapInner('<span title="sort this column"/>') 
    .each(function(){ 
     ... 
     $('#accending_1,#accending_2').click(function(e){ 

這將完成對每一個個，並且有4個標籤的兩排，點擊處理程序添加到id accending_1元素和accending_2。這將爲每個按鈕添加8個點擊處理程序！

有很多方法可以解決這個問題。而不必爲每個按鈕使用類特定的ID和發現它們相對於頭部的：

$('th') 
    .wrapInner('<span title="sort this column"/>') 
    .each(function(){ 

     $('.accending', this).click(

example

注意在選擇限制到當前TH的後裔最後一行this參數。儘管如此，這仍然會搜索TH的頂行。

它可能會更好，只是直接搜索按鈕然後制定出他們是在什麼樣的列。

$('.accending, .accending') 
    .wrapInner('<span title="sort this column"/>') 
    .click(function(e){ 
     console.log("click"); 
     var th = $(this).closest('th'), 
     thIndex = th.index(); 
     table.find('td') 
     .filter(function(){ 
      return $(this).index() === thIndex; 
     }) 
     .sort(
      function(a, b){ 
      return $.text([a]) > $.text([b]); 
      }, function(){ 
      // parentNode is the element we want to move 
      return this.parentNode; 
      } 
     ); 
    }); 
    $('.decending, .decending') 

example

目前仍然在代碼中有很多重複的，和HTML。

增強和降低點擊處理程序幾乎是相同的，所以讓我們只需傳入排序功能。

//This function returns another function which is a click handler. 
    //It takes the sort function as a parameter. 
    function createClickHandler(sortFunction){ 
    return function(e){ 
     var th = $(e.target).closest('th'), 
     thIndex = th.index(); 
     console.log(th); 
     table.find('td') 
     .filter(function(){ 
      return $(this).index() === thIndex; 
     }) 
     .sort(sortFunction, function(){ 
      // parentNode is the element we want to move 
      return this.parentNode; 
      } 
     ); 
    }; 
    } 

    $('.accending, .accending') 
    .wrapInner('<span title="sort this column"/>') 
    .click(createClickHandler(function(a, b){ 
     return $.text([a]) > $.text([b]); 
     }) 
    ); 
    $('.decending, .decending') 
    .wrapInner('<span title="sort this column"/>') 
    .click(createClickHandler(function(a, b){ 
     return $.text([a]) < $.text([b]); 
     }) 
    ); 

example

的HTML也可以清理一下。這些按鈕的標籤都是一樣的，所以讓我們從javascript中直接添加點擊處理程序插入它們，而不必搜索它們。由於我們正在迭代列標題，我們可以清理我們如何獲得列號。最後，傳遞兩個不同的排序函數有點浪費，所以讓我們傳遞一個方向參數。

//This function returns another function which is a click handler. 
    //It takes the sort function as a parameter. 
    function createClickHandler(column, isAccending){ 
    return function(e){ 
     table.find('td') 
     .filter(function(){ 
      return $(this).index() === column; 
     }) 
     .sort(function(a, b){ 
      var order = $.text([a]) > $.text([b]); 
      return isAccending ? order : !order; 
     }, function(){ 
      // parentNode is the element we want to move 
      return this.parentNode; 
     }) 
     ; 
    }; 
    } 

    $('#controls th').each(function(column,item){ 
    //Note we get the column index for for free with the each function 
    $(this) 
     .append($('<a title="sort this column" href="#">Ascending</a>') 
     .click(createClickHandler(column, true)) 
    ) 
     .append('&nbsp;&nbsp;') 
     .append($('<a title="sort this column" href="#">Decending</a>') 
     .click(createClickHandler(column, false)) 
    ) 
     ; 
    }); 

example

---

注意，我刪除了反向可變。它從未被使用過。

return $.text([a]) > $.text([b]) 
    inverse ? -1 : 1 
    ; 

我不知道你怎麼想這是做什麼，但它實際上返回第一線，由於automatic semicolon insertion。它將被解釋爲：

return $.text([a]) > $.text([b]); 
    inverse ? -1 : 1; 

所以反相是死代碼。這是javascript的壞點之一，不是很明顯。 jsbin警告你缺少分號。在提交代碼之前，始終值得修正任何錯誤/警告。

Answer 2

我真的很喜歡 「的SortTable」 的劇本在kryogenix.org - http://www.kryogenix.org/code/browser/sorttable/

非常容易使用和安裝。

Answer 3

我讓你的代碼工作。下面是代碼，你也可以在jsbin測試：http://jsbin.com/alawub/15/

的Javascript：

$(document).ready(function(){ 

    var $table = $('table'); 
    $table.on('click', 'th a.accending_1, th a.decending_1', function(e){ 
    var th = $(e.target).parent('th'), 
    thIndex = th.index(), 
    direction = $(e.target).attr('class').match('accending')?'A':'D', 
    sortDir = th.data('direction'+thIndex); 
    if(sortDir && sortDir == direction) return; 

     $table.find('td').filter(function(){ 
       return $(this).index() === thIndex; 
      }).sort(function(a, b){ 
       if(direction == 'D') 
        return $.text([a]) > $.text([b]) ? -1 : 1; 
       else 
        return $.text([a]) > $.text([b]) ? 1 : -1; 

      }, function(){ 
       // parentNode is the element we want to move 
       return this.parentNode; 
      }); 
     th.data('direction'+thIndex, direction); 
    }); 

}); 

HTML：（只更正A類的）的

<th id="facility_header1"> 
     Table Header 1<br /> 
     <a href="#" class="accending_1">Accending</a>&nbsp;&nbsp; 
     <a href="#" class="decending_1">Decending</a> 
    </th> 
    <th id="facility_header2"> 
     Table Header 2<br /> 
     <a href="#" class="accending_1">Accending</a>&nbsp;&nbsp; 
     <a href="#" class="decending_1">Decending</a> 
    </th> 

在jsbin工作例如：http://jsbin.com/alawub/15/

Answer 4

我認爲tablesorter提供您需要的功能。它當然處理文本和數字列。動態更新表有一個問題，但有一個很好的修復here。

Answer 5

我可以在JS Bin中看到4條警告。

第67行：return $ .text（[a]）> $ .text（[b]）---缺少分號。
第68行：反？ -1：1 ---期望一個賦值或函數調用，而是看到一個表達式。
第82行：return $ .text（[a]）< $ .text（[b]）---缺少分號。
83行：反？ 1：-1; ---期望一個賦值或函數調用，而是看到一個表達式。

希望糾正這些錯誤會給你預期的結果。