Сортировка таблицы с помощью jQuery

Сортировка данных — обязательная функция для сайта, если на нем есть контент, отображаемый в виде таблицы. Для удобства пользователя необходимо сделать таблицу сортируемой. В этой статье мы покажем, как сортировать таблицу с помощью jQuery.

Демо-версия

Чтобы отсортировать таблицу:

1.     Создайте HTML-файл и определите разметку.
2.     Создайте файл js и определите скрипты.
3.     Создайте файл CSS и определите стили.

Шаг 1. Создайте HTML-файл и определите разметку

Мы создаем HTML-файл и сохраняем его под именем sort.html:

<html>
<head>
 <link href="sort.css"  rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" 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. Вы можете изменить приведенный в этой статье код в соответствии со своими требованиями. И не стесняйтесь оставлять комментарии!

Перевод статьи «Sort Table Using jQuery» был подготовлен дружной командой проекта Сайтостроение от А до Я