Цель:
Добавить возможность сортировки таблицы с информацией по нужным столбцам.
Каждый день, заходя в интернет, сталкиваемся с огромными объёмами информации. Что-то пропускаем мимо, не замечаем, на определённую часть обращаем внимание, обрабатываем в худшем случае глазами, в лучшем-воспринимаем и запоминаем. Всегда хочется, что бы информация преподавалась в наилучшем виде! Это экономит время…
Демо-версия сортировки таблицы 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
Владимир — 01.10.2010
16:23
Статья написана по всем правилам и критериям за, что автору ставлю 5+!
admin — 17.10.2010
21:49
Владимир Спасибо!