自定义数据表使用jquery排序升序和降序

Question

我有以下数据表,单独排序升序和降序按钮.我正在使用jQuery插件"jQuery.fn.sort" James Padolsey

这是工作示例

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

我想为每个Col添加排序但是它不起作用请查看我的JS代码以上任何其他替代解决方案,欢迎这样做.

Answer 1

您要多次添加点击处理程序:

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

这将是每个th,并且有两行第4个标签,为id为accending_1和accending_2的元素添加一个点击处理程序.这将为每个按钮添加8个点击处理程序!

有很多方法可以解决这个问题.不是每个按钮都有特定的id,而是使用类并相对于标题找到它们:

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

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

例

请注意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')

例

代码和html中仍然有很多重复.

加入和降序的点击处理程序几乎相同,所以让我们传递sort函数.

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

例

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

例

请注意,我删除了逆变量.它从未被使用过.

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

我不确定你认为这是怎么回事,但由于自动分号插入,它实际上是在第一行返回.它将被解释为:

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

所以逆是死代码.这是javascript的坏点之一,并不是很明显.jsbin警告你丢失分号.在此处提交代码之前,总是值得修复任何错误/警告.