«
»

jQuery table sort сортировка таблиц

Столкнулся с задачей сортировки значений в строках таблицы, на стороне клиента. Нашел хорошее решение в виде jquery плагина от Christian Bach на http://tablesorter.com/docs/.
table sort jquery
Несколькими строками js можно задать сортировку. Таблица должна соответствовать нескольким условиям

Иметь вид

<table id="myTable">
<thead>
<tr>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Due</th>
    <th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Smith</td>
    <td>John</td>
    <td>jsmith@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>fbach@yahoo.com</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>jdoe@hotmail.com</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>tconway@earthlink.net</td>
    <td>$50.00</td>
    <td>http://www.timconway.com</td>
</tr>
</tbody>
</table> 
т.е. содержать в структуре <thead> и <tbody>
в блоке <thead> задаются заголовки для  столбцов
а в <tbody> соответственно  само содержимое
инициализируется  сортировка кодом
$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);


если необходимо  запретить сортировку  по некоторым  полям  то


пишем


$("#myTable").tablesorter({headers:{1:{sorter: false},6:{sorter: false}}})

этим отключается сортировка у первого и шестого столбца

плагин очень гибкий и легко нестраиваемый, более подробно можно ознакомится на сайте автора.

здесь tablesorter.zip рип с хелпом и примерами

Тэги: , ,

Прибыльный домашний бизнес
  • jQuery SELECT (jquery-asmselect)
  • jQuery отслеживаем ввод символа в input (Enter, tab)
  • WordPress подключение JQuery
  • jQuery png Fix
  • Печать картинки на странице через js
  • jQuery ajax в IE7
  • Prototype и jQuery используем одновременно
  • jQuery cookie проще некуда
  • jQuery watermark input field
  • jQuery округлые углы
  • jQuery древовидное меню
  • jQuery ajax рейтинг

    • Запись была опубликована Понедельник, мая 4, 2009 в 17:32 в рубрике jQuery. Читать рассылку RSS 2.0. Вы можете оставить комментарий или трэкбек с Вашего сайта.

    Оставить комментарий