Иллюстрированный самоучитель по созданию сайтов

Сортировка таблицы


Теперь давайте осуществим сортировку списка книг. Добавим для начала две кнопки — для сортировки по алфавиту, соответственно, авторов и названий книг:

<INPUT TYPE="button"VALUE="Сортировать по автору" onClick="sort_auth()">

<INPUT TYPE="button"VALUE="Сортировать по названию" onClick="sort_name()">

Теперь напишем сами функции сортировки. Для этого нам подойдет чудес-ное свойство элементоуправления Tabular Data, которое называется SortColumn. В качестве его значения нужно указать поле, значения которого нужно сортировать. Для сортировки по фамилиям авторов в данном случае сле-дует указать поле Author, а для сортировки по названиям книг — поле Name. После этого нужно не забыть применить метод Reset(), чтобы заново “перерисовать” весь список:

function sort_auth() { hudlit.SortColumn="Author"; hudlit.Reset() ;

} . function sort_name() { hudlit.SortColumn="Name" ; hudlit.Reset();

Кстати, применение метода сортировки может избавить от необходимости заботиться о расположении записей в файле базы данных Например, в данном случае при поступлении нового архива с текстом книги можно просто добавлять запись о нем в конец файла. При загрузке файла можно сразу применить сортировку. Кстати, это можно сделать и с помощью тега <PARAM>, который должен быть внутри тега

<OBJECT>

элемента управле-ния Tabular Data:

<PARAM NAME="SortColumn" VALUE="Author">

В этом случае сразу после загрузки страницы записи будут отсортированы по фамилиям авторов, независимо от того, в каком порядке они распола-гались в файле базы данных.

Давайте посмотрим на текст получившейся страницы.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Электронная библиотека</TITLЕ>

<STYLE> BODY { background-color: #F4FFEF;

color: #182F1A; font-family: sans-serif; font-size: 120%;


} </STYLE> <SCRIPT LANGUAGE""JavaScript" TYPE="text/javascript">

function auth() { document.all.book.value="";

hudlit.Filter="Author="+document.all.auth.value;

hudlit.Reset () ;

} function bookname() {

document.all.auth.selectedlndex=0;

hudlit.Filter="Name="+document.all.book.value;

hudlit.Reset (); } function sort auth()

{ hudlit.SortColumn="Author";

hudlit.Reset () ;

}

function sort_name()

{ hudlit.SortColumn="Name";

hudlit.Reset() ;

//-->

</SCRIPT>

</HEAD>

<BODY>

<Н1>Художественная литература</Н1>

<INPUT TYPE="button" VALUE=" Сортировать по автору" onClick="sort_auth()">

<INPUT TYPE="button" VALUE="Сортировать по названию" onClick="sort_name()">

<BR><BR>

Выберите автора:

<SELECT NAME="auth" onChange="auth ()">

<OPTION VALUE="">Bce

<OPTION VALUE="Дюма">Дюма

<OPTION VALUE="Достоевский">Тостоевский

<OPTION VALUE ="Толстой">Толстой ;</SELECT>

<BR><BR> Или введите название книги:

<INPUT TYPE="text" NAME="book" SIZE="15" MAXLENGTH="25">

<INPUT TYPE="button" NAME="search" VALUE="Поиск" onClick="bookname()">

<BR><BR>

<OBJECT ID="hudlit" CLASSID="clsid:333C7BC4-460F-11DO-BC04-0080C7055A83" B0RDER="0" ,WIDTH="0" HEIGHT="0">

<PARAM NAME="DataURL" VALUE="books.txt">

<PARAM NAME="UseHeader" VALUE="True"> </OBJECT>

<TABLE DATASRC="#hudlit"> <TR>

<TD><SPAN DATAFLD="Author"></SPAN>, &laquo;

<SPAN DATAFLD="Name"></SPAN>&raquo;,



<SPAN DATAFLD="Size"> </SPAN>Snbsp;кбайт.

<SPAN DATAFLD="File" DATAFORMATAS="html"> </SPAN></TD>

</TR> </TABLE>

</BODY>

</HTML>

Результат показан на рис. 9.2. Конечно, это очень простой пример, который хочется еще улучшить. Например, перед поиском введенного пользователем названии книги хорошо бы сначала удалить лишние пробелы и кавычки, а если введенное название не найдено, то вывести сообщение oб этом. Можно использовать файл базы данных для построения нескольких различных страниц и т. д. Однако приведенный пример уже дает некоторое представление о возможностях элемента Tabular Data. Читателям, заинтересовавшимся использованием элементов управления в Internet Explorer, можно рекомендовать обратиться к специальной литературе по этой теме.



Рис. 9.2. Соративовка данных


Содержание раздела