Фильтр данных на jquery?

Question

[GaserV]

Добрый день! Подскажите пожалуйста, как реализовать фильтр сообщений при клике?
есть таблица сообщений, с "name, message,date". Нужно при клике на кнопки, соответствующих каждой из этих ячеек, делать фильтр сообщений. Т.е. при клике на кнопку "name" происходила сортировка сообщений по имени по алфавиту в порядке возрастания, при еще одном клике, в порядке убывания. При клике на кнопку "message" и "date" тоже самое. Как такое реализовать? Быть может я что-то упустил и не нашел нужной инфы. Помогите хотябы туториал найти какой-нибудь) На angular знаю как это сделать, но смысл тащить целую либо ради одной сортировки.

Comments

[OVK2015]

3 переменных, в которых храните порядок сортировки каждого из столбцов + нативный array.sort кот. сортирует содержимое столбцов

[GaserV]

OVK2015: а у меня такая ситуация еще. Входящие и исходящие сообщения. В табах. Как здесь быть? Для каждой таблицы всосвывать эти кнопки, или же есть какое-то универсальное решение?

[OVK2015]

GaserV: Сортируете таблицу вы по столбцам "name, message,date". Текст сообщений тут ни на что не влияет. Просто в качестве массива для сравнения выбирайте все строки таблицы, а внутри array.sort(function(item){...}) сравнивайте эл-ты по содержимому, выбранного поля таблицы

[OVK2015]

GaserV: Вроде работает

var sortOrder = new Array(false, false, false);

    function columnSort(event)
    {
      var columnIndex = $(this).prev().length;
      $('table tbody').html
      (
        $('table tbody tr').sort(function(item1, item2)
          {
            if(!sortOrder[columnIndex])
            {
              if
              (
                $(item1).children('td:eq(' + columnIndex + ')').text().trim() >
                $(item2).children('td:eq(' + columnIndex + ')').text().trim()
              )
              {return 1;}
              else{return -1;}
            }
            else
            {
              if
              (
                $(item1).children('td:eq(' + columnIndex + ')').text().trim() <
                $(item2).children('td:eq(' + columnIndex + ')').text().trim()
              )
              {return 1;}
              else{return -1;}
            }
          })
      );
      sortOrder[columnIndex] = !sortOrder[columnIndex];
    }

    $(document).ready(function()
    {
      $('tr th').bind('click', columnSort);
    });

Answer 1

[xmoonlight]

tablesorter.com/docs

Comments

[GaserV]

у меня кастомная таблица. На div' ах

[xmoonlight]

GaserV: по клику пересоздавайте контейнер (innerHTML), сортируя в нужном порядке и не забывая установить флаг сортировки на колонку, по которой был выполнен клик.