Демо-версия сортировки таблицы c использованием jQuery

На большинстве сайтов небольших компаний можно встретить прайсы, прейскуранты услуг. Например, на сайтах компьютерного оборудования и комплектующих очень много похожих товаров. Лично у меня часто возникает желание их отсортировать по той или иной колонке. Это действительно удобно! А если у тебя для покупки есть определённая сумма, тут вообще сразу всё видно!

В принципе, организовать сортировку к таблице несложно.  Если у вас берутся запросы из базы данных просто меняй запрос и получай новую таблицу. Иногда хочется, чтобы сортировка происходила без перезагрузки страницы! В этом случае можно, например, воспользоваться ajax’ом. А можно попробовать смешать js-код с php-кодом.

1 <script type="text/javascript" src="MySortingScript.php"></script>

Выглядит экзотично. На самом деле все будет работать, если этот внешний подключённый php-файл будет выдавать валидный js.

1 <?
2 //"MySortingScript.php"
3 Header("content-type: application/x-javascript");
4 echo "document.write(\"<span>Пример</span>\")";
5 ?>

Однако иногда бывает ситуации, когда имеется прайс, написанный вручную и хранящийся в виде статичной таблицы. В таком случае можно с помощью jQuery реализовать небольшой скрипт.

Идея заключается в том, что мы будем запоминать ячейки таблицы, а так же связанные с ними ячейки. В данном случае к каждому наименованию комплектующего приводится в соответствие цена. В нашем примере всего две колонки и нам подошел так называемый ассоциативный массив. Если бы колонок было больше видимо пришлось выкручиваться и придумывать двумерный массив…

1 var fields_even=$("td:even"); // выбирает ячейки из левой колонки
2 var fields_odd=$("td:odd"); // выбирает ячейки из правой колонки
3 var accordArray={}; // "ассоциативный" массив 
4 
5 for(i=0;i<fields_even.length;i++) {
6     //задаём соответствие ячеек из колонки наименования и ячеек из колонки стоимости
7     accordArray[$(fields_even[i]).text()]=$(fields_odd[i]).text();
8 }

Чуть позже этот массив поможет нам восстановить корректно все поля таблички. Сама сортировка будет производится в две стороны, прямая и обратная. Заметим, что стандартный метод .sort() справляется отлично во всех случаях, кроме одного! Когда мы сортируем числа, транслятор будет сравнивать числа по одной цифре, а не целыми числами. Наглядно, если у нас есть числа 12 14 и 134, то сортировка будет произведена так: 12 134 14. Здесь поможет небольшая уловка.

1 text.sort(function(a,b){a=parseInt(a,10);b=parseInt(b,10);return b-a});

В итоге добавим обработчики на обе кнопки. Не забудем про графику! Добавим две картиночки, показывающие в какую сторону проводится сортировка. Также добавим немного юзабилити, расположим маленькую иконочку при наведении мышки. Это очень важно, чтобы пользователь понимал и пользовался функционалом.

1 $("td.name").mouseover(function() {
2     //при наведении на ячейку "наименованиe" добавляем картиночку
3     $("td.name").css('background','#66CC66 url(updown_arrow.gif) no-repeat left center');
4 }).mouseout(function() {
5     $("td.name").css('background-image','none');
6 });

И вот перед нами еще одно интернет решение.

Демо-версия сортировки таблицы |  Скачать проект архивом .rar