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: Create XSLT
The first line of the XSLT style single indicates the XML specification version of the XML, then indicates the namespace used by the style, here, we write in the official version of the XSL specification, not the writing of the draft of XSL:
Note: The two have great differences in functions and writing.
Next, we define the template tag in the XSLT:
We write the style you want to display to the template. 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, directly embed data, as shown below:
The second is to reference the external document through the SRC attribute, as shown below:
To use the data in the data island, you must reference it through the ID name, of course, since the XSLT file is also one of the XML format file, or can be implemented in this way:
Use the data in the data island using XSLT, using DomDocument's TransNode () method, and display the results through the DIV innerhtml attribute:
Displayarea.innerhtml = data.transformNode (style.documentelement)
Step 2: Realize the functionality of client sorting
We first set a default sort field, select "Sequence" as the default sorting keyword, and is arranged in the incremental order, join the sort tag in XSLT:
Next, we add sorted features to the style sheet so that we can respond to the user's operation, we add an OnClick event on each column of the header, which calls the sort () function, allowing users to perform by clicking the header. Sort above the column.
'Get the original order of order attribute values
Set sortorderAttribute = style.xmldocument.selectsinglenode ("// xsl: sort / @ Order")
'If we have sorted by the fields of the column you have, we must change the order of sorting;
'Otherwise, we only need to sort by default order according to the column fields of the new all clicks.
If Sortfield.Value = strfield or sortfield.value = "./*[0]" THEN
If SortordRAttribute.Value = "descending" THEN
SortOrderattribute.value = "ascending"
Else
SortOrderattribute.value = "descending"
END IF
Else
Sortfield.value = strfield
SortOrderattribute.value = "ascending"
END IF
Set sortfield = Nothing
Set sortordrattribute = Nothing
'The result of the output sort
Displayarea.innerhtml = data.transformNode (style.documentelement)
END FUNCTION
Below, we implements the number of records displayed per page and set the previous page, the function of the rear page. Use the span tag to display the current display, how many pages and records have the total number of pages and records. We have 6 records per page by default, save this value with variable INTRECORDSPAGE:
| No. page total Strip Record | per page record number: < / b> |
The following is performed by the "Next" button as an example, and the process of converting different pages will be described. The function determines the number of records to be displayed and the corresponding page of the record according to the parameter INTPAGE, and the change in each button value is achieved by dynamically changing the content of the XSL DOM: Function NextPage (INTPAGE) DIM STRDISPLAY DIM STRDATERANGE IF CINT (CSTR (INTPAGE) * INTRECORDSPERPAGE) <_ Data.selectnodes ("/ customer relational table / customer") .length then INTPAGE = CINT (INTPAGE) 1 Style.xmldocument.selectnodes ("@ @ onclick") _ (1) .Value = "PreviousPage (" & INTPAGE & ")" Style.xmldocument.selectnodes ("@ Onclick") _ (2) .value = "NextPage (" & INTPAGE & ")" Style.xmldocument.selectnodes_ ("//xsl:for-each/@select") (1).value = _ "./ Customer [Position () <=" & (cstr (INTPAGE) _ * IntRecordsperpage) & "and position ()>" _ & (CINT (INTPAGE) - 1) * INTRECORDSPERPAGE & _ "]" Redisplay (INTPAGE) END IF END FUNCTION Below, let's take a look at the function setRecordsperPage () that sets each page record number, which is implemented by dynamically modifying the XSL: for-Each select attribute value, using XPath to traverse those in line with the node position greater than 0 and the node position Small than those nodes of the number 1 plus 1 per page. The main statement is the following line: Style.xmldocument.selectnodes ("// xsl: for-each / @ select") (1). _ Value = "./ Customer [Position () <& intRecordsperpage 1 &" & "Position ()> 0]" So far, our pages can be sorted and realized dynamically changed to display the number of records per page. In order to achieve reusable requirements, we can further improve further. 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 there is such a selection template in our XSLT: In order to achieve versatility, we can use wildcard: Here we use the sub-operator "/", which chooses all nodes under the root, the difference between the "/ customer relational table" is selected by the root customer relationship table, and "/ *" Selected is all direct child nodes under the roots, both in the XML data format, both of which are completely equivalent. For the for-Each cycle below: We can change into such a form: Here "./*" indicates that you should include all the primary sub-nodes in 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 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 (' The custom function is a prominent feature of XSLT. To use this feature, we have to use MSXML: Script elements to define, while specifying a user-defined namespace when the style is defined. Below is the full content of our use of custom functions: http://www.w3.org/1999/xsl/transform XMLns: msxsl = "URN: Schemas-Microsoft-COM: XSLT" XMLns: user = " http://lucky.myrice.com " Version = "1.0">
Function GetName (Node) GetName = node.Item (0) .Nodename END FUNCTION }> In our xslt file, two cycles are used, we have the corresponding changes, first: display the places where the header is changed to
Function GetName (Node) GetName = node.Item (0) .Nodename END FUNCTION }> Sort (' The following is an exam.htm file that is output: |
