мотивация:
Чтобы облегчить пользователям просмотр больших объемов данных, мы будем использовать динамическую пейджинг, поэтому функция пейджинга является наиболее распространенным и часто используемым функциональным модулем, который мы видели на веб-сайте. Раньше подкачка информации была подключена к базе данных, и каждый клик требовал поддержки фоновой базы данных. Это не только увеличивает нагрузку на сервер, но и серьезно влияет на скорость просмотра пользователем.
Вот представьте, если на клиенте поставить функцию пейджинга, какой эффект это будет иметь? Ха-ха, взгляните на дизайн ниже! .
Материал:
Динамическое разбиение на страницы тома XML состоит из двух файлов:pages.xml иpages.xsl.
Функции:
Поместите функцию подкачки на сторону клиента. Фильтруйте данные без обновления страницы, что эффективно повышает эффективность просмотра данных.
Эффект:
Просмотреть здесь
Код:
страницы.xml
<?xml version="1.0"coding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<СиняяИдея>
<команда>
<blue_ID>1</blue_ID>
<blue_name>Парусный полет</blue_name>
<blue_text>Простой пейджинг</blue_text>
<blue_time>11 января 2002 17:35:33</blue_time>
<blue_class>Тема XML</blue_class>
</команда>
<команда>
<blue_ID>2</blue_ID>
<blue_name>летящая птица</blue_name>
<blue_text>Женитьба на тебе причинит тебе боль</blue_text>
<blue_time>06.09.2001 12:45:51</blue_time>
<blue_class>Эссенция ирригации</blue_class>
</команда>
<команда>
<blue_ID>3</blue_ID>
<blue_name>Као Цзы</blue_name>
<blue_text>Применение регулярных выражений на форуме UBB</blue_text>
<blue_time>23.11.2001 21:02:16</blue_time>
<blue_class>Сущность веб-программирования</blue_class>
</команда>
<команда>
<blue_ID>4</blue_ID>
<blue_name>Тайиланг</blue_name>
<blue_text>Полное руководство для классической группы управления на конец года, версия 0.1</blue_text>
<blue_time>08.12.2000 10:22:48</blue_time>
<blue_class>Ирригационная зона форума</blue_class>
</команда>
<команда>
<blue_ID>5</blue_ID>
<blue_name>ммкк</blue_name>
<blue_text>Сводка сообщений об ошибках Asp</blue_text>
<blue_time>13 октября 2001 г. 16:39:05</blue_time>
<blue_class>Javascript</blue_class>
</команда>
</BlueIdea>
страницы.xsl
<?xml version="1.0"coding="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<голова>
<title> Практические советы по объему XML (3): динамическое разбиение на страницы</title>
<стиль>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{шрифт: 12 пикселей «宋体», «Arial», «Times New Roman» };
таблица {размер шрифта: 12 пикселей; граница: 0 пикселей двойной; цвет границы: # 99CC99 # 99CC99 #CCCCCC #CCCCCC;
диапазон {размер шрифта: 12 пикселей; цвет: красный};
.keybutton {курсор: рука; размер шрифта: 12 пикселей; цвет: # 003300; фон: #ffffff; граница: 0 пикселей;}
</стиль>
<скрипт>
<xsl:комментарий>
<![CDATA[
varOnePageNum=2;
варПажеНум = 1;
вар XMLPageNum = 1;
страницы функций (число)
{
таблица стилей = document.XSLDocument;
источник = документ.XMLDocument;
узлы = source.documentElement.childNodes;
лен=узлы.длина;
for(i=1;i<=(len/OnePageNum);i++);
XMLPageNum = я;
вар firstNum = 0;
вар LastNume=0;
если (Num=="первый") {PageNum=1;}
if (Num=="предыдущий") {if (PageNum>1) PageNum -=1;}
if (Num=="следующий") {if (PageNum<XMLPageNum) PageNum +=1;}
if (Num=="last") {PageNum =XMLPageNum;}
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
firstNum=OnePageNum*(PageNum-1)+1;
LastNum=OnePageNum*(PageNum-1)+OnePageNum;
text="childnumber(this)>="+firstNum+" & childnumber(this)<="+lastNum;
sortField.value=текст;
Layer1.innerHTML=source.documentElement.transformNode(таблица стилей);
}
]]>
</xsl:комментарий>
</скрипт>
</head>
<тело>
<p align="center"><span>Практические советы по объемам XML (3): динамическое разбиение на страницы</span></p>
<table align="center" width="500" >
<тр>
<тд>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Домашняя страница</button>
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >Предыдущая страница</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">Следующая страница</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">Последняя страница</button>
</td>
</tr>
</таблица>
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</body>
</html>
</xsl:шаблон>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>Число</td>
<td>Имя</td>
<td>Тема</td>
<td>Время публикации</td>
<td>Классификация</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</таблица>
</xsl:шаблон>
<xsl:template match="команда">
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
<tr align="center">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:if>
</xsl:шаблон>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:значение />
</td>
</xsl:шаблон>
<xsl:template match="blue_name">
<тд>
<xsl:значение />
</td>
</xsl:шаблон>
<xsl:template match="blue_text">
<тд>
<xsl:значение />
</td>
</xsl:шаблон>
<xsl:template match="blue_time">
<тд>
<xsl:значение />
</td>
</xsl:шаблон>
<xsl:template match="blue_class">
<тд>
<xsl:значение />
</td>
</xsl:шаблон>
</xsl:таблица стилей>
объяснять:
1) search.xml — это файл данных, думаю, проблем у всех не возникнет.
2) search.xsl — это файл формата, есть несколько вещей, на которые следует обратить внимание.
(1) В скрипте:
nodes=source.documentElement.childNodes;
Функция: найти все узлы. nodes.length — общее количество узлов, соответствующих условиям
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
Функция такова: найти первый узел с атрибутом expr, чтобы соответствующий ему узел был
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Следовательно, значение expr во время первой загрузки равно
дочерний номер(это)<=1 и дочернийномер(это)>=2
О > Возможно, вам это знакомо. Итак, что такое & Это «и».
Другие вы можете найти в книгах по XML.
Описание параметра:
OnePageNum: количество данных, отображаемых на каждой странице.
PageNum: номер текущей страницы.
XMLPageNum: общее количество страниц.
firstNum: первое значение данных текущей страницы.
LastNum: последнее значение данных текущей страницы.
(2) В тексте:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
При пейджинге нам необходимо выводить соответствующие данные, поэтому мы используем условие if для управления ими.
Вначале мы просили выводить только значения первых двух узлов.
номер ребенка (это)
Функция: Возвращает номер текущего узла в списке вышестоящих узлов. Номер первого узла в списке по умолчанию равен 1.
При пейджинге мы определяем, к какой странице она принадлежит, по номеру узла.
выражение
Не знаю, заметили ли вы, что первые два раза мы использовали test, но на этот раз мы использовали expr.
Между ними есть определенные различия, и их использование также различается.
expr ─ выражение языка сценариев, результат вычисления — «истина» или «ложь»; если результат «истина» и проходит проверку, содержимое будет отображено на выходе (этот атрибут можно опустить).
test ── условия тестирования исходных данных.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Домашняя страница</button>
Функция заключается в возврате данных на предыдущую страницу. Остальные кнопки работают аналогично.
Еще один момент: Как использовать файлы примеров XML
1) Сохраните два файла в каждом примере отдельно в соответствии с их именами.
2) Используйте браузер для просмотра XML-файла. Вот какой эффект вы увидите, он должен быть хорошим!
постскриптум:
Хаха, можно добавить функцию перелистывания после динамической сортировки. Затем сделайте количество списков настраиваемым. Используйте свое воображение, чтобы сделать эти функции более совершенными. Вы можете изучить лучшие способы реализации функций подкачки. Очень приятно дискутировать друг с другом!