Question

例如我有这个结构：

<a href='#' id='by_id'>Sort by id</a>
<a href='#' id='by_author'>Sort by author</a>
<a href='#' id='by_title'>Sort by title</a>
<div id="my_list">
  <div data-id='1' data-author='Pushkin'>Fairy Tale</div>
  <div data-id='3' data-author='Tolstoy'>Anna Karenina</div>
  <div data-id='2' data-author='Doyl'>Fairy Tale</div>
  <div data-id='5' data-author='Tarantino'>Kill Bill</div>
  <div data-id='9' data-author='Pushkin'>Fairy Tale</div> 
</div>

现在我想通过点击我的酷链接来按标题，ID或作者对div进行排序。

是否有这个工作的插件，或者没有任何外部库很容易实现？

Answer 1

轻巧，简单。试试这个：）

$('#sortables').delegate('a', 'click', function() {
    var by = $(this).attr('id').match(/^by_(.*)/i);
    if (by)
    {
      mySort.sort(by[1]);
    }
});

var mySort = {

  sortables: {
    'title': {
      method: 'text',
      type: 'alpha'
    },
    'author': {
      method: 'attr',
      val: 'data-author',
      type: 'alpha'
    },
    'id': {
      method: 'attr',
      val: 'data-id',
      type: 'numeric'
    }
  },

  sort: function(sortBy)
  {
    if (!mySort.sortables[sortBy]) return;
    var sortedElements = [];
    var sortVal;

    var sort = mySort.sortables[sortBy];

    $('#my_list > div').each(function() {

      sortVal = $(this)[sort.method](sort.val || null);
      sortedElements.push([this, sortVal]);
    });

    // ">" sorts in ascending order, "<" will sort in descending order.
    sortedElements.sort(function(a, b) {
        var result;
        return (sort.type == 'numeric') ?
            a[1] - b[1] :
            a[1] > b[1];
    });

    // Create a new div to replace the old one with
    var $newDiv = $('<div id="my_list">');

    $(sortedElements).each(function() {
        $newDiv.append(this[0]);
    });

    $('#my_list').replaceWith($newDiv);

  }
};

在这里工作小提琴：http://jsfiddle.net/fHTmQ/3

Answer 2

我认为你可以使用datagrid插件，

http://www.trirand.com/blog/?page_id=5

jQuery <tag>按不同选项排序</tag>

2 个答案: