javascript - 使用 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

请注意最后一行的 this 参数，该参数将选择器限制为当前 TH 的后代。不过，这仍然会搜索 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 警告您缺少分号。在此处提交代码之前，修复任何错误/警告总是值得的。