Здравствуйте, уважаемые читатели блога LifeExample, сегодня мы будем говорить о том, как работает jQuery сортировка таблицы, и попробуем вместе разобраться с этой насущной проблемой каждого веб программиста. Уверен, что если вы еще не сталкивались с задачей сортировки таблицы на JavaScript, то рано или поздно вам это понадобится.
Таблицы в сайтах — это очень нужный и полезный элемент представления информационных данных, и работы с ними. Кроме того, когда-то без таблиц не обходилась ни одна верстка сайта.
Сегодня с появлением различных инструментов, таких как библиотека jQuery, пользователи избалованы интерактивность HTML страниц. Например, для того, чтобы изменить свои личные данные, им не нужно ждать долгой перезагрузки страницы, и можно с легкостью, перетаскивать нужное изображение в отведенную область. И таких примеров куча, одним из примеров интерактивности как раз и является функция сортировки таблицы.
$cbr_xml = str_replace(array("n","r","t"),"",getContentPage('http://www.cbr.ru/scripts/XML_daily.asp?date_req='.date('d/m/Y',strtotime("+1 day"))));
if(preg_match_all('~<Valute.*?>(.*?)</Valute>~i',$cbr_xml,$Valute)){
$table="<table class='tablesorter' ><thead><tr><th>Код</th><th>Сокращение</th><th>Сокращение</th><th>Количество</th><th>Стоимость</th></tr></thead><tbody>";
foreach($Valute[1] as $data){
$table.="<tr>";
preg_match('~<NumCode>(.*?)</NumCode>~i',$data,$NumCode);
$table.="<td>".$NumCode[1]."</td>";
preg_match('~<CharCode>(.*?)</CharCode>~i',$data,$CharCode);
$table.="<td>".$CharCode[1]."</td>";
preg_match('~<Nominal>(.*?)</Nominal>~i',$data,$Nominal);
$table.="<td>".$Nominal[1]."</td>";
preg_match('~<Name>(.*?)</Name>~i',$data,$Name);
$table.="<td>".$Name[1]."</td>";
preg_match('~<Value>(.*?)</Value>~i',$data,$Value);
$table.="<td>".$Value[1]."</td>";
$table.="</tr>";
}
$table.="</tbody></table>";
echo $table;
}
function getContentPage($url){
$c = curl_init($url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
$text = curl_exec($c);
curl_close($c);
return $text;
}
Скрипт получает информацию в виде XML файла, с официального сайта Центрального банк Российской Федерации, парсит ее и выводит в виде готовой неотсортированной таблицы HTML.
Не отсортированная таблица валют
Так как к теме статьи его работа не относится, я не стану описывать, что конкретно происходит в коде, но если вам интересно, спрашивайте в комментариях.
Итак, у нас имеется таблица курсов валют, из которой нам нужно сделать продвинутую сортируемую таблицу jQuery , с возможностью отбирать данные по столбцам.
Сделать сортировку HTML таблицы с помощью библиотеки jQuery очень просто, но мы пойдем еще более простым способом и обратимся к использованию специально плагина для, сортировки таблицы, под названием Tablesorter.
Скачать Tablesorter ( Скачали: 98 чел. )
<script type="text/javascript">
$(document).ready(function() {
$("table").tablesorter({ widgets: ['zebra']});
});
</script>
Давайте еще установим некоторые css стили для лучшей наглядности
Скачать style.css ( Скачали: 54 чел. )
Выполненных операций должно быть достаточно, чтобы jQuery сортировка таблицы заработала должным образом. Попробуем проверить и запустим скрипт. Вот что должно получиться:
jQuery отсортированная таблица валют
Как видите в заголовках колонок, не только появились иконки для сортировки, но и фон строк начал чередоваться, придавая таблице удобный для работы вид.
Чередование строк в сортировочной таблице можно отменить, если не указывать в функции события, параметр:
1
widgets: ['zebra']
Так как именно он отвечает за чередование классов строк.
На данном этапе можно успокоиться и оставить все как есть, но вскоре мы поймем, что для работы с таблицей неплохо было бы иметь систему пагинации, т.е. разбивать имеющийся набор строк таблицы на части, и переключаться между ними.
Пагинация таблицы
Как это ни странно но, и эта задача решается очень просто при использовании, очередного, плагина пагинации.
Скачайте плагин пагинации на jQuery для сортировочной таблицы:
Tablesorter-pager ( Скачали: 31 чел. )
Подключим его в коде скрипта
1
<script type="text/javascript" src="/jquery.tablesorter.pager.js"></script>
Добавим элементы для пайджера:
<div id="pager" class="pager" style="height:50px">
<form>
<img src="/icon/first.png" class="first"/>
<img src="/icon/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="/icon/next.png" class="next"/>
<img src="/icon/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</div>
Немного изменим JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$("table").tablesorter({widgets: ['zebra']}).tablesorterPager({container: $("#pager")});;
$(".pagesize :last").attr("selected", "selected");
});
</script>
И вот у нас уже все готово:
Пагинация для таблицы
Вот так вот, малой кровью, можно организовать сортировку таблицы по столбцам. Стоит заметить, что не каждая таблица подойдет плагину Tablesorter! Необходимо, чтобы сортировочная таблица была построена по всем HTML правилам, а именно содержала в своей конструкции теги такой структуры:
<table>
<thead>
<tr>
<th>Заголовок</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
В завершении статьи "jQuery сортировка" таблицы, я бы хотел предложить вам полную версию разработанного скрипта:
