search
HomeBackend DevelopmentXML/RSS TutorialXML 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>正则表达式在UBB论坛中的应用</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(&#39;first&#39;);" >首页</button> 
<button id="cmdpreviousPage" class="keybutton" onclick="pages(&#39;previous&#39;);" >上一页</button>
<button id="cmdnextPage" class="keybutton" onclick="pages(&#39;next&#39;);">下一页</button> 
<button id="cmdlastPage" class="keybutton" onclick="pages(&#39;last&#39;);">尾页</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 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(&#39;first&#39;);" >首页</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 (www.php.cn)!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How to Parse and Utilize XML-Based RSS FeedsHow to Parse and Utilize XML-Based RSS FeedsApr 16, 2025 am 12:05 AM

RSSfeedsuseXMLtosyndicatecontent;parsingtheminvolvesloadingXML,navigatingitsstructure,andextractingdata.Applicationsincludebuildingnewsaggregatorsandtrackingpodcastepisodes.

RSS Documents: How They Deliver Your Favorite ContentRSS Documents: How They Deliver Your Favorite ContentApr 15, 2025 am 12:01 AM

RSS documents work by publishing content updates through XML files, and users subscribe and receive notifications through RSS readers. 1. Content publisher creates and updates RSS documents. 2. The RSS reader regularly accesses and parses XML files. 3. Users browse and read updated content. Example of usage: Subscribe to TechCrunch's RSS feed, just copy the link to the RSS reader.

Building Feeds with XML: A Hands-On Guide to RSSBuilding Feeds with XML: A Hands-On Guide to RSSApr 14, 2025 am 12:17 AM

The steps to build an RSSfeed using XML are as follows: 1. Create the root element and set the version; 2. Add the channel element and its basic information; 3. Add the entry element, including the title, link and description; 4. Convert the XML structure to a string and output it. With these steps, you can create a valid RSSfeed from scratch and enhance its functionality by adding additional elements such as release date and author information.

Creating RSS Documents: A Step-by-Step TutorialCreating RSS Documents: A Step-by-Step TutorialApr 13, 2025 am 12:10 AM

The steps to create an RSS document are as follows: 1. Write in XML format, with the root element, including the elements. 2. Add, etc. elements to describe channel information. 3. Add elements, each representing a content entry, including,,,,,,,,,,,. 4. Optionally add and elements to enrich the content. 5. Ensure the XML format is correct, use online tools to verify, optimize performance and keep content updated.

XML's Role in RSS: The Foundation of Syndicated ContentXML's Role in RSS: The Foundation of Syndicated ContentApr 12, 2025 am 12:17 AM

The core role of XML in RSS is to provide a standardized and flexible data format. 1. The structure and markup language characteristics of XML make it suitable for data exchange and storage. 2. RSS uses XML to create a standardized format to facilitate content sharing. 3. The application of XML in RSS includes elements that define feed content, such as title and release date. 4. Advantages include standardization and scalability, and challenges include document verbose and strict syntax requirements. 5. Best practices include validating XML validity, keeping it simple, using CDATA, and regularly updating.

From XML to Readable Content: Demystifying RSS FeedsFrom XML to Readable Content: Demystifying RSS FeedsApr 11, 2025 am 12:03 AM

RSSfeedsareXMLdocumentsusedforcontentaggregationanddistribution.Totransformthemintoreadablecontent:1)ParsetheXMLusinglibrarieslikefeedparserinPython.2)HandledifferentRSSversionsandpotentialparsingerrors.3)Transformthedataintouser-friendlyformatsliket

Is There an RSS Alternative Based on JSON?Is There an RSS Alternative Based on JSON?Apr 10, 2025 am 09:31 AM

JSONFeed is a JSON-based RSS alternative that has its advantages simplicity and ease of use. 1) JSONFeed uses JSON format, which is easy to generate and parse. 2) It supports dynamic generation and is suitable for modern web development. 3) Using JSONFeed can improve content management efficiency and user experience.

RSS Document Tools: Building, Validating, and Publishing FeedsRSS Document Tools: Building, Validating, and Publishing FeedsApr 09, 2025 am 12:10 AM

How to build, validate and publish RSSfeeds? 1. Build: Use Python scripts to generate RSSfeed, including title, link, description and release date. 2. Verification: Use FeedValidator.org or Python script to check whether RSSfeed complies with RSS2.0 standards. 3. Publish: Upload RSS files to the server, or use Flask to generate and publish RSSfeed dynamically. Through these steps, you can effectively manage and share content.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.