Блог

Главная - Вопросы по программированию - jQuery сортировка по различным параметрам

jQuery сортировка по различным параметрам

#javascript #jquery #html #sorting

#javascript #jquery #HTML #сортировка

Вопрос:

Например, у меня есть такая структура:

 <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>

Теперь я хочу отсортировать свои divs по названию, id или автору, нажав на мои классные ссылки.

Есть ли плагин для этой работы или его легко реализовать без каких-либо внешних библиотек?

Комментарии:

1. Ну, если это список, UL / LI было бы более подходящим (и более читаемым)…

2. Да, но это выглядит очень просто. Divs могут состоять из изображений и еще некоторых данных. Я не думаю, что это общий список. В любом случае, это ничего не изменит, если это будет обернуто в виде списка

3. Модель содержимого для элементов LI и DIV одинакова (содержимое потока). Элемент UL представляет список элементов, и то, что у вас есть, является списком элементов.

Ответ №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 resu<
        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

Комментарии:

1. @Gary Не могли бы вы создать демо-версию jsfiddle?

2. Очевидно, что трудно увидеть изменения для автора и идентификатора, поскольку отображается только заголовок, но если вы посмотрите на HTML, вы увидите, что они отсортированы в порядке возрастания. Очень элегантно и просто. 🙂

3. работает отлично! Надеюсь, вы оформите это как плагин 😉 для большей универсальности. Спасибо за помощь!

4. Вот небольшая ошибка: сортировка по первому символу, поэтому после 33 идет 5

5. Ах. Для числовой сортировки вам нужно использовать функцию return a[1] - b[1] in .sort() . Я обновил скрипку и код.

Ответ №2:

Я думаю, вы можете использовать плагин datagrid,

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

Комментарии:

1. Nono! Он слишком большой. Здесь могло бы быть что-то легкое и простое.

2. @floor, хорошо, тогда давайте я поищу что-нибудь более легкое, в противном случае вы можете написать настраиваемое самостоятельно, повторно заполнив html, снова вызвав ajax….