Сортировка таблицы с помощью jQuery
Сортировка данных в таблицах улучшает удобство работы с сайтом. jQuery позволяет легко настроить сортировку по клику на заголовки столбцов, что упрощает управление таблицей и делает ее более понятной. Этот подход экономит время пользователя и повышает качество интерфейса.
Мы разберем простую схему подключения jQuery-сортировки и подготовим таблицу к работе: структуру, классы и базовые стили. Вы узнаете, как настроить сортировку по заголовкам, избежать частых ошибок и быстро встроить функцию в свой проект, даже если опыта пока немного.
Шаг 1. Создайте HTML-файл и определите разметку
Мы создаем HTML-файл и сохраняем его под именем sort.html:
<html>
<head>
<link href="sort.css" rel="stylesheet"/>
<script src="jquery.js"></script>
<script src="sort.js"></script>
</head>
<body>
<div id="wrapper">
<table id="mytable" cellpadding="7" align="center">
<tr>
<th onclick="sort_name();">SORT NAME</th>
<th onclick="sort_age();">SORT AGE</th>
</tr>
<tbody id="table1">
<tr>
<td>Aman</td><td>28</td>
</tr>
<tr>
<td>Rahul</td><td>36</td>
</tr>
<tr>
<td>Amit</td><td>21</td>
</tr>
<tr>
<td>Suresh</td><td>34</td>
</tr>
<tr>
<td>Karan</td><td>14</td>
</tr>
<tr>
<td>Pooja</td><td>24</td>
</tr>
</tbody>
</table>
<input type="hidden" id="name_order" value="asc">
<input type="hidden" id="age_order" value="asc">
</div>
</body>
</html>Создаем таблицу и добавляем в нее строки и заголовок таблицы. Когда пользователь нажимает на название любого столбца, данные сортируется по этому столбцу. Затем создаем два скрытых поля, предназначенных для хранения порядка сортировки обоих столбцов.
Шаг 2. Создайте JavaScript-файл и определите скрипты
Создаем файл JavaScript и сохраняем его под именем sort.js:
function sort_name()
{
var table=$('#mytable');
var tbody =$('#table1');
tbody.find('tr').sort(function(a, b)
{
if($('#name_order').val()=='asc')
{
return $('td:first', a).text().localeCompare($('td:first', b).text());
}
else
{
return $('td:first', b).text().localeCompare($('td:first', a).text());
}
}).appendTo(tbody);
var sort_order=$('#name_order').val();
if(sort_order=="asc")
{
document.getElementById("name_order").value="desc";
}
if(sort_order=="desc")
{
document.getElementById("name_order").value="asc";
}
}
function sort_age()
{
var table=$('#mytable');
var tbody =$('#table1');
tbody.find('tr').sort(function(a, b)
{
if($('#age_order').val()=='asc')
{
return $('td:last', a).text().localeCompare($('td:last', b).text());
}
else
{
return $('td:last', b).text().localeCompare($('td:last', a).text());
}
}).appendTo(tbody);
var sort_order=$('#age_order').val();
if(sort_order=="asc")
{
document.getElementById("age_order").value="desc";
}
if(sort_order=="desc")
{
document.getElementById("age_order").value="asc";
}
}Создаем две функции, которые используются для сортировки по имени и по возрасту. В функции sort_name() сначала получаем table и tbody. Затем используем jQuery- функцию sort() для сортировки имен по алфавиту, сравнивая первую строку первого столбца со второй строкой. После этого добавляем отсортированную строку в tbody. Затем мы меняем порядок сортировки, если он изменяется с «asc» на «desc» и наоборот.
В функции sort_age() мы используем тот же метод, что и в функции sort_name(). Но вместо td сначала используем td: last, потому что age- последний столбец таблицы, и мы получаем значение age_order для проверки и изменения.
Шаг 3. Создайте файл CSS и определите стили
Создаем файл CSS и сохраняем его под именем sort.css:
body
{
text-align:center;
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#B45F04;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
}
#mytable
{
text-align:center;
}
#mytable th
{
color:white;
font-size:18px;
cursor:pointer;
}
#mytable td
{
color:white;
font-size:17px;
border:1px solid;
}Вот и все! Таким образом,можно создать сортируемую таблицу с помощью jQuery. Вы можете изменить приведенный в этой статье код в соответствии со своими требованиями. И не стесняйтесь оставлять комментарии!
Комментарии