In Web development, we often encounter a page display and sorting data record set, which uses server-side code and database technology in server-side, such as: ASP, PHP, JSP, etc. However, if you want to display multiple records on the client, it is a very distressed thing. Below, we use Extensible Markup Language (XML, Scalable Markup Language) and Extensible Stylesheet Language Transformations (XSLT, Extensible Styles Single Language Conversion), and combine XML Path Language (XPath, XML Path Language), just write simple code It can be easily implemented. This approach avoids the process of frequently dealing with the server, saving the time of data display, and the viewer can see the result, or reduce the burden on the server. Also. Due to the XML and XSLT technology, the data storage and data display is separated, but it can also make our code can be reused, which greatly reduces the burden of programmers write code. Below, let's take our function step by step. First of all: Creating the first line of the XSLT XSLT style single indicates the XML specification version of the XML, and then the namespace used by the style sheet, here, we write in the official version of the XSL specification, without using XSL Draft Writing: Note: The two have great differences in functions and write. Next, we define template tags in XSLT: We put Writes to the template to be displayed. We use HTML's data island to store our data, which can be obtained using the XML query of SQL Server 2000, for databases that do not support XML, we can write components to convert data into XML format, then put them in data island in.
There are two ways to use the data island in HTML: First, embed data directly, as shown below: Each data The second is to reference the external file through the SRC property, as shown below: To use the data in the data island, It must be referenced by the ID name, of course, since the XSLT file is also one of the XML format file, can also be implemented in this way: < / XML> We add tagged div to the page to display the results of our conversion:
Using the data of the xslt to convert data islands, use DomDocument's TransNode () method, and put the result Express DIV's InnerHTML attribute: DisplayArea.innerHtml = data.transformNode (style.documentelement) Step 2: Implementing the client Sort by We first set a default sort field, select "Serial" as the default sort Keywords, and is arranged in the incremental order, joining the sort tag in XSLT: Next, we add sorting features to the style sheet to respond to the user's operation, we add an OnClick event on each column of the header, which calls the sort () function. Allow users to be sorted by clicking the header.
We have 6 records per page by default, save this value with variable INTRECORDSPAGE:
SPAN ID = "CURRENTPAGE"> page Total page Total strip record
per page record number:
The following operation as the "Next" button as an example Description Converts the processing of different pages.
The function determines the number of records and corresponding pages to be displayed according to the parameter INTPAGE, each button value value is implemented by dynamically changing the content of XSL DOM: Function nextpage (INTPAGE) DIM STRDISPLAY DIM STRDATERANGE IF CINT CSTR (INTPAGE) * intrecordsperpage) <_ data.selectnodes ("/ customer relational table / customer") .length kilns = cint (intPage) 1 style.xmldocument.selectnodes ("@ onclick") _ (1) .Value = "" & INTPAGE & ")" style.xmldocument.selectnodes ("@ onclick") _ (2) .value = "Next (" & INTPAGE & ")" style.xmldocument.selectnodes _ ( "//xsl:for-each/@select") (1).value = _" ./ Customer [Position () <= "& (cstr (intPage) _ * intrecordsperpage) &" and position ()> "_ & (CINT (INTPAGE) - - 1) * INTRECORDSPAGE & _ "]" REDISPLAY (INTPAGE) End If End Function Next, let's take a look at the function setRecordsperPage () set for each page recorder number, which is dynamically modified XSL: The select attribute value of For-Each is implemented, using XPath to traverse those nodes that match the node position greater than 0 and the node location is less than 1 number per page. The main statement is the following line: style.xmldocument.selectnodes ("// xsl: for-each / @ selection) (1)) (1)) (1). _ Value =" ./ Customer [Position () <"& intRecordsperPage 1 & "And" & "position ()> 0]" So far, our page can be sorted and realized to dynamically change the function of displaying records per page, in order to achieve reusable requirements, we can further carry out improvement of. XPath is a powerful tool for XML / XSLT application development. You can use wildcards in XPath to make XSLT style single files completely depend on your data node name. Therefore, when we change XML data, we will not be able to use XSLT without changing the hierarchical relationship of the node. For example: In this example, you can add or delete some fields, or add some records, directly using the XSLT in this example, not only can display data normally in the form, but also normal sort and paging. Let's analyze how to achieve it.
For example, the following hierarchical relationship: If we There is a sentence of a selection template in XSLT: In order to achieve versatility, we can use wildcard: Here we use subcarers "/", which select all nodes under the root, and the difference between the "/ customer relational table" is selected by the root customer relationship table, and "/ * "Select all direct child nodes root, in the above XML data format, both are completely equivalent. For the following For-Each cycle: We can change Such a form: here ". / * "Indicates that you should include all a primary sub-node under the current node, the syntax" ./*[1] "indicates that the first child node in the current node is selected. There is also a place to improve the , we can change it to , Indicating that in each cycle Current node. In our function, I also use some hardcodes. If I don't make changes, our versatility is not realized, so we look at how to replace the statement in the hard code.
When you create a header, we use the statement of
sort ('' '') Custom function is a prominent function of XSLT, to use This feature, we have to use the MSXML: Script element to define, while specifying a user-defined namespace when the style is defined. Below we use all the contents of our custom function: In our XSLT file, use two loops, we do the corresponding changes, first: display the plan to "XSL : for-each select = "./* [1] / *">, it is equivalent to ; the second cycle is displaying each Record, change to
The following is the content of the complete style.xsl file:
No. page Total page Total < / span> strip record
per page record number:
<
Input type = "Button" onclick = "lastpage ()" value = "Last page" />
