自定义数据表排序使用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; ---期望一个赋值或函数调用，而是看到一个表达式。

希望纠正这些错误会给你预期的结果。