Вторник, 06.03.2012, 02:02
Проверенный
| Нужна таблица с автосортировкой. Только понятное и рабочее.И самое главное, чтобы таблица сортировалась по нескольким столбикам сразу! |
|
Суббота, 10.03.2012, 18:26
Пользователь
Сортировка с использованием JQuery
Так будет выглядеть таблица http://s019.radikal.ru/i621/1203/1d/497fc428fe9f.jpg
Сначала загружаем в корень сайта следующие изображения:
http://s019.radikal.ru/i622/1203/f1/ea1c8573bfc5.gif
http://s019.radikal.ru/i619/1203/9f/af9857f2fdf1.gif
http://s019.radikal.ru/i611/1203/f2/b78ddee907b4.gif
В CSS вставляем:
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(bg.gif); //тут укажите ссылку на картинку с двумя стрелками
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(asc.gif); //тут укажите ссылку на картинку со стрелкой вниз
}
table.tablesorter thead tr .headerSortDown {
background-image: url(desc.gif); //тут укажите ссылку на картинку со стрелкой вверх
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
Тут можете поэкспериментировать с цветами размерами шрифтам и т.д..
Далее между тегами <head> и </head> вставляем:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.htmldrive.net/edit_media/2010/201006/20100609/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
Теперь можно вставлять таблицу куда вам нужно
HTML:
<table id="myTable" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Difference</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20.9%</td>
<td>+12.1</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>+12</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
</tbody>
</table> |
Пост отредактировал Michael_J - Суббота, 10.03.2012, 18:46 |
|
