XML volume practical tips (3): dynamic paging
Motivation:
In order to facilitate users to view large batches of data, we will use dynamic paging, so the paging function is the most common and commonly used functional module we have seen on the website. In the past, information paging was connected to the database, and every click required the support of the background database. This not only increases the burden on the server, but also seriously affects the user's browsing speed.
Just imagine, if the paging function is put on the client, what kind of effect will it have? Haha, take a look at the design below! .
Materials:
XML Volume Dynamic Paging
There are 2 files: pages.xml and pages.xsl
Function:
Put the paging function on the client . Filter data without refreshing the page, effectively improving the efficiency of browsing data.
Effect:
Browse here
Code:
pages.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<BlueIdea>
<team>
<blue_ID>1</blue_ID>
<blue_name>Sailflying</blue_name>
<blue_text>一个简单的分页</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML专题</blue_class>
</team>
<team>
<blue_ID>2</blue_ID>
<blue_name>flyingbird</blue_name>
<blue_text>嫁给你，是要你疼的</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>灌水精华</blue_class>
</team>
<team>
<blue_ID>3</blue_ID>
<blue_name>苛子</blue_name>
<blue_text>正则表达式在ＵＢＢ论坛中的应用</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>Web 编程精华</blue_class>
</team>
<team>
<blue_ID>4</blue_ID>
<blue_name>太乙郎</blue_name>
<blue_text>年末经典分舵聚会完全手册 v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>论坛灌水区</blue_class>
</team>
<team>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Asp错误信息总汇</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript脚本</blue_class>
</team>
</BlueIdea>
pages.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title> XML卷之实战锦囊（3）：动态分页</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; }
table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink}
span { font-size: 12px; color: red; }
.keybutton { cursor:hand; font-size: 12px; color: #003300; background: #ffffff; border: 0px solid;}
</style>
<script>
<xsl:comment>
<![CDATA[
var OnePageNum=2;
var PageNum=1;
var XMLPageNum=1;
function pages(Num)
{
stylesheet=document.XSLDocument;
source=document.XMLDocument;
nodes=source.documentElement.childNodes;
len=nodes.length;
for(i=1;i<=(len/OnePageNum);i++);
XMLPageNum=i;
var firstNum=0;
var lastNume=0;
if (Num=="first") {PageNum=1;}
if (Num=="previous") {if (PageNum>1) PageNum -=1;}
if (Num=="next") {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=text;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
]]>
</xsl:comment>
</script>
</head>
<body>
<p align="center"><span>XML卷之实战锦囊（3）：动态分页</span></p>
<table align="center" width="500" >
<tr>
<td>
<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>
</table>
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</body>
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="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"/>
</table>
</xsl:template>
<xsl:template match="team">
<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:template>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:value-of />
</td>
</xsl:template>
</xsl:stylesheet>
Explanation:
1) search.xml is a data file, I believe everyone will have no problem.
2) search.xsl is a format file, there are several things to pay attention to.
(1) In the script:
nodes=source.documentElement.childNodes;
The function is: find all nodes. nodes.length is the total number of nodes that meet the conditions
sortField=document.XSLDocument.selectSingleNode("//@expr");The function is to find the first node with the attribute expr, so its corresponding node is
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Therefore, the value of expr during the first onLoad is
childnumber(this)<=1 & childnumber(this)>=2
About> < You may be more familiar with it. what is that? It is "AND".
You can find some others in XML books.
Parameter description:
OnePageNum: The number of data displayed on each page
PageNum: The current page number
XMLPageNum: The total number of pages
firstNum: The first data value of the current page
lastNum: The last data value of the current page
(2) In the text:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
In paging we need to output the appropriate data, so we use an if judgment condition to control it.
In the initial stage, we require that only the values of the first two nodes be output.
childnumber(this)
Function: Return the number of the current node in its superior node list. The default number of the first node in the list is 1.
In paging, we judge which page it belongs to based on the number of the node.
expr
I don’t know if you have noticed that the first two times we used test, but this time we used expr.
There are certain differences between them, and their usage is also different.
expr ── Script language expression, the calculation result is "true" or "false"; if the result is "true" and passes the test, the content will be displayed in the output (this attribute can be omitted).
test ── Source data test conditions.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >首页</button>
The function is to return the data to the previous page. The other buttons work similarly.
Additional points: How to use XML example files
1) Save the two files in each example separately according to their file names.
2) Just browse the XML file with a browser. This is the effect you will see, it should be good!
Postscript:
Haha, you can add the function of paging after dynamic sorting. Then make the number of lists configurable. Use your imagination to make these functions more perfect. You can research better ways to implement paging functionality. It’s great to discuss with each other!
The above is the practical tips for XML volume (3): the content of dynamic paging. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Can I open an XML file using PowerPoint?
Feb 19, 2024 pm 09:06 PM
Can XML files be opened with PPT? XML, Extensible Markup Language (Extensible Markup Language), is a universal markup language that is widely used in data exchange and data storage. Compared with HTML, XML is more flexible and can define its own tags and data structures, making the storage and exchange of data more convenient and unified. PPT, or PowerPoint, is a software developed by Microsoft for creating presentations. It provides a comprehensive way of
Convert XML data to CSV format in Python
Aug 11, 2023 pm 07:41 PM
Convert XML data in Python to CSV format XML (ExtensibleMarkupLanguage) is an extensible markup language commonly used for data storage and transmission. CSV (CommaSeparatedValues) is a comma-delimited text file format commonly used for data import and export. When processing data, sometimes it is necessary to convert XML data to CSV format for easy analysis and processing. Python is a powerful
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an
How to handle XML and JSON data formats in C# development
Oct 09, 2023 pm 06:15 PM
How to handle XML and JSON data formats in C# development requires specific code examples. In modern software development, XML and JSON are two widely used data formats. XML (Extensible Markup Language) is a markup language used to store and transmit data, while JSON (JavaScript Object Notation) is a lightweight data exchange format. In C# development, we often need to process and operate XML and JSON data. This article will focus on how to use C# to process these two data formats, and attach
How to use PHP functions to process XML data?
May 05, 2024 am 09:15 AM
Use PHPXML functions to process XML data: Parse XML data: simplexml_load_file() and simplexml_load_string() load XML files or strings. Access XML data: Use the properties and methods of the SimpleXML object to obtain element names, attribute values, and subelements. Modify XML data: add new elements and attributes using the addChild() and addAttribute() methods. Serialized XML data: The asXML() method converts a SimpleXML object into an XML string. Practical example: parse product feed XML, extract product information, transform and store it into a database.
Using Python to implement data verification in XML
Aug 10, 2023 pm 01:37 PM
Using Python to implement data validation in XML Introduction: In real life, we often deal with a variety of data, among which XML (Extensible Markup Language) is a commonly used data format. XML has good readability and scalability, and is widely used in various fields, such as data exchange, configuration files, etc. When processing XML data, we often need to verify the data to ensure the integrity and correctness of the data. This article will introduce how to use Python to implement data verification in XML and give the corresponding
Convert POJO to XML using Jackson library in Java?
Sep 18, 2023 pm 02:21 PM
Jackson is a Java-based library that is useful for converting Java objects to JSON and JSON to Java objects. JacksonAPI is faster than other APIs, requires less memory area, and is suitable for large objects. We use the writeValueAsString() method of the XmlMapper class to convert the POJO to XML format, and the corresponding POJO instance needs to be passed as a parameter to this method. Syntax publicStringwriteValueAsString(Objectvalue)throwsJsonProcessingExceptionExampleimp
PHP and XML: How to parse SOAP messages
Aug 09, 2023 pm 02:42 PM
PHP and XML: How to parse SOAP messages Overview: SOAP (Simple Object Access Protocol) is a protocol for transmitting XML messages over the network and is widely used in web services and distributed applications. In PHP, we can use the built-in SOAP extension to process and parse SOAP messages. This article will introduce how to use PHP to parse SOAP messages and provide some code examples. Step 1: Install and enable the SOAP extension First, we need
