jQuery <tag>сортировка по разным параметрам

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>

Теперь я хочу отсортировать мои 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