GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Java: Русские буквы и не только...(76009)
Автоматизация с WSH(26648)
Сортировка столбцов в таблице без перезагрузки(14435)
Доступ к базам данных из Java-программ и проблемы русификации(13836)
Блоки try... catch... finally... в JScript 5(12737)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » Java/JavaScript » Сортировка столбцов в таблице без перезагрузки

Сортировка столбцов в таблице без перезагрузки


Александр Шуркаев
alshur@narod.ru
http://htmlcoder.visions.ru/

Иногда перед разработчиком стоит задача обеспечить сортировку столбцов в таблице с данными. Классическим решением является использование какого-нибудь серверного ЯП, который бы сортировал данные по определённому столбцу и отдавал полученную страницу клиенту.

Я хочу вам предложить альтернативное решение, работающее в W3C DOM-совместимых браузерах: Internet Explorer 5+ и Netscape Navigator 6+/Mozilla. Вообще, первым алгоритм сортировки предложил Пол Соуден (Paul Sowden), я же внёс в скрипт существенные коррективы.

Вот, что мы получаем в итоге (нажмите на заголовок, чтобы отсортировать колонку):

Имя Фамилия Сайт Переключалка стилей
Александр Шуркаев htmlcoder.visions.ru Угу
Пол Соуден idontsmoke.co.uk Угу
Джеффри Зельдман zeldman.com Угу
Аарон Будман youngpup.net Не-а
Глен Мерфи glenmurphy.com Не-а
Даниель Боган waferbaby.com Не-а
Ден Бенджамин hivelogic.com Угу

В других браузерах (например, Opera) таблица просто останется не отсортированная, в первозданном виде.

Теперь же о том, всё это дело реализуется. Буду объяснять по пунктам (изменения в плане HTML, CSS и JavaScript), чтобы легче было проследить логику.

HTML
Прежде всего, необходимо особым образом отформатировать таблицу, к которой вы собираетесь подключить возможность сортировки. Обратите внимание на код:

<table class="sort" align="center">
<thead>
<tr>
<td>Имя</td>
<td>Фамилия</td>
<td>Сайт</td>
<td>Переключалка стилей</td>
</tr>
</thead>
<tbody>
<tr>
<td>Александр</td>
<td>Шуркаев</td>
<td><a href="http://htmlcoder.visions.ru/">htmlcoder.visions.ru</a></td>
<td>Угу</td>
</tr>

<tr>
<td>Ден</td>
<td>Бенджамин</td>
<td><a href="http://hivelogic.com/">hivelogic.com</a></td>
<td>Угу</td>
</tr>
</tbody>
</table>

Как вы видите, необходимо указать теги thead (шапка таблицы) и tbody (основная часть). Обычно их мало кто использует, но здесь эти теги весьма кстати.

Вам также нужно создать две картинки, которые бы указывали текущий вариант сортировки — 0.gif (картинка сортировки вниз) и 1.gif (картинка сортировки вверх). Положите их, например, в корневой директории в папку «i». Я обычно называю папки с картинками для сайта именно так, но ничто не мешает использовать для наших целей классическую папку «images». Дело хозяйское, просто тогда вам нужно будет поменять в программке переменную img_dir (см. ниже пункт JavaScript).

В моём случае стрелочки выглядят так (можете их спионерить, я не против :-):

 

CSS
Задаём следующие классы в таблице стилей:

/* наша HTML таблица */
table.sort{
border-spacing:0.1em;
margin-bottom:1em;
margin-top:1em
}

/* ячейки таблицы */
table.sort td{
border:1px solid #CCCCCC;
padding:0.3em 1em
}

/* заголовки таблицы */
table.sort thead td{
cursor:pointer;
cursor:hand;
font-weight:bold;
text-align:center;
vertical-align:middle
}

/* заголовок отсортированного столбца */
table.sort thead td.curcol{
background-color:#999999;
color:#FFFFFF
}

Затем не забудьте указать у HTML таблицы класс sort (<table class="sort" align="center">).

JavaScript
Итак, мы подошли к «начинке» всего этого дела. Пропишите на странице следующий фрагмент:

<script type="text/javascript">
<!--
/*
originally written by paul sowden <paul@idontsmoke.co.uk> | http://idontsmoke.co.uk
modified and localized by alexander shurkayev <alshur@narod.ru> | http://htmlcoder.visions.ru
*/

var img_dir = "/i/"; // папка с картинками

// вспомогательная ф-ция, выдирающая из дочерних узлов весь текст
function getConcatenedTextContent(node) {
    var _result = "";
    if (node == null) {
        return _result;
    }
    var childrens = node.childNodes;
    var i = 0;
    while (i < childrens.length) {
        var child = childrens.item(i);
        switch (child.nodeType) {
            case 1: // ELEMENT_NODE
            case 5: // ENTITY_REFERENCE_NODE
                _result += getConcatenedTextContent(child);
                break;
            case 3: // TEXT_NODE
            case 2: // ATTRIBUTE_NODE
            case 4: // CDATA_SECTION_NODE
                _result += child.nodeValue;
                break;
            case 6: // ENTITY_NODE
            case 7: // PROCESSING_INSTRUCTION_NODE
            case 8: // COMMENT_NODE
            case 9: // DOCUMENT_NODE
            case 10: // DOCUMENT_TYPE_NODE
            case 11: // DOCUMENT_FRAGMENT_NODE
            case 12: // NOTATION_NODE
            // skip
            break;
        }
        i++;
    }
    return _result;
}

// флаг сортировки
var up = false;

// суть скрипта
function sort(e) {
    var el = window.event ? window.event.srcElement : e.currentTarget;

    if (el.tagName == "IMG") el = el.parentNode;

    var a = new Array();
    var name = el.lastChild.nodeValue;
    var dad = el.parentNode;

    var node, arrow, curcol;
    for (var i = 0; (node = dad.getElementsByTagName("td").item(i)); i++) {
        if (node.lastChild.nodeValue == name){
            curcol = i;
            if (node.className == "curcol"){
                arrow = node.firstChild;
                up = Number(!up);
                arrow.src = img_dir + up + ".gif";
            }else{
                node.className = "curcol";
                arrow = node.insertBefore(document.createElement("img"),node.firstChild);
                up = false;
                arrow.src = img_dir + Number(up) + ".gif";
            }
        }else{
            if (node.className == "curcol"){
                node.className = "";
                if (node.firstChild) node.removeChild(node.firstChild);
            }
        }
    }

    var tbody = dad.parentNode.parentNode.getElementsByTagName("tbody").item(0);
    for (var i = 0; (node = tbody.getElementsByTagName("tr").item(i)); i++) {
        a[i] = new Array();
        a[i][0] = getConcatenedTextContent(node.getElementsByTagName("td").item(curcol));
        a[i][1] = getConcatenedTextContent(node.getElementsByTagName("td").item(1));
        a[i][2] = getConcatenedTextContent(node.getElementsByTagName("td").item(0));
        a[i][3] = node;
    }

    a.sort();

    if (up) a.reverse();

    for (var i = 0; i < a.length; i++) {
        tbody.appendChild(a[i][3]);
    }
}

// ф-ция инициализации всего процесса
function init(e) {
    if (!document.getElementsByTagName) return;
    var thead = document.getElementsByTagName("thead").item(0);
    var node;
    for (var i = 0; (node = thead.getElementsByTagName("td").item(i)); i++) {
        if (node.addEventListener) node.addEventListener("click", sort, false);
        else if (node.attachEvent) node.attachEvent("onclick",sort);
        node.title = "Нажмите на заголовок, чтобы отсортировать колонку"; // задаём подсказку у заголовка таблицы
    }
    thead.getElementsByTagName("td").item(0).click(); // эмулируем клик на первом заголовке. в NN6/Mozilla не работает.
}

// запускаем ф-цию init() при возникновении события load
var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
    if (root.addEventListener) root.addEventListener("load", init, false);
    else if (root.attachEvent) root.attachEvent("onload", init);
}
//-->
</script>

Единственное, что вам нужно поменять в скрипте, так это переменную img_dir. Она должна указывать на каталог, где у вас лежат файлы 0.gif (картинка сортировки вниз) и 1.gif (картинка сортировки вверх).

Я решил не разбирать детально сам скрипт. Кому интересно, как всё работает, думаю, сам сможет понять.

Засим откланиваюсь. До встречи!

 
28.01.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.