Create a sorted, paging data display page with XML
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, you must reference the ID name It, of course, because the XSLT file is also one of the XML format file, or can be implemented in this way: We join tag DIV To display our conversion:
Using the data in the data island using the data in the data island, use the DomDocument's TransNode () method, and display the results via the DIV INNERHTML attribute: Displayarea .innerhtml = data.transformnode (style.documentelement) Step 2: Implementing the client sorting We first set a default sort field, select "Sequence" as the default sorting keyword, and is arranged in the incremental order Add to Sort tags 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, the event calls the sort () function, allowing the user to click the header The sorting of the column is performed.
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 feature of XSLT, to use this feature, we You have to define the MSXML: Script element, and you must specify 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 make corresponding changes, first place: Displaying the places where the header is changed to < XSL: for-each select = "./* [1] / *">, it is equivalent to ; the second cycle is displayed Each line is recorded, changed to
The final browsing effect will be as shown in the figure below: The following is the content of the complete style.xsl file: < MSXSL: Script language = "vbscript" imports-prefix = "user">
No. page total page Total strip record
per page record number:
< INPUT TYPE = "Button" onclick = "firstpa GE () "value =" first "/>
')
The following is an exam.htm file for output:
Option Explicit Dim INTRECORDSPAGE 'Each page Displayed INTRECORDSPAGE = 6' Each page displayed record number, the default setting is 6 'update display page Function window_onload ()' Displays the set record number Style.xmldocument. SelectNodes ("// xsl: for-each / @ Select") (1) .Value = "./* [position () <" & intrecordsperpage 1 & "and position ()> 0]" Transform () setPageCount ) End Function 'for XML-XSLT conversion, and display some information currently recorded Function transform () DisplayArea.innerHTML = Data.transformNode (Style.DocumentElement) RecordsPerPage.Value = intRecordsPerPage End Function' re-convert the XML, and displays a status information Function redisplay (intPage) Dim strDisplay Dim intPageCount Dim intRecordCount 'save state information intPageCount = PageCount.innerHTML intRecordCount = RecordCount.innerHTML transform ()' display status information PageCount.innerHTML = intPageCount RecordCount.innerHTML = intRecordCount CurrentPage.innerHTML = intPage End Function ' Reorder and display the Function Sort (Strfield) DIM Sortfield Dim Sortord erAttribute 'sort attribute value obtained Set sortField = Style.XMLDocument.selectSingleNode ( "// xsl: sort / @ select") Set sortOrderAttribute = Style.XMLDocument.selectSingleNode ( "// xsl: sort / @ order")' change the order of way If sortField.Value = strField Or sortField.Value = "./*[0]" Then If sortOrderAttribute.Value = "descending" Then sortOrderAttribute.Value = "ascending" Else sortOrderAttribute.Value = "descending" End If Else sortField. Value = strfield sortordrattribute.value = "
ascending "End If Set sortField = Nothing Set sortOrderAttribute = Nothing redisplay (CurrentPage.innerHTML) End Function 'reset page record number Function setRecordsPerPage () If IsNumeric (RecordsPerPage.Value) Then intRecordsPerPage = CInt (RecordsPerPage.Value) window_onload End If End Function 'display page information Function setPageCount (Dim intTotalRecords PageCount.innerHTML = getNumberOfPages (intTotalRecords) RecordCount.innerHTML = intTotalRecords CurrentPage.innerHTML = 1 End Function)' to calculate the total number of pages and the total number of records Function getNumberOfPages (intTotalRecords) Dim intPages intTotalRecords = Data.XMLDocument.selectNodes ( "/ * / *"). length intPages = intTotalRecords / intRecordsPerPage If InStr (intPages, ".")> 0 Then intPages = CInt (Left (intPages, InStr (intPages, ".") )) 1 End if getnumberofpages = INTPAGES End Function '"Next" DIM STRDISPLAY DIM STR DateRange if cint (cstr (intPage) * intRecordsperpage) " & (cint - 1) * intrecordsperpage &
"]" Redisplay (intPage) End If End Function 'process "Previous" Function previousPage (intPage) Dim strDisplay Dim strDateRange If intPage> 1 Then intPage = CInt (intPage) - 1 Style.XMLDocument.selectNodes ( "// @ OnClick ") (1) .Value =" previouspage ("& INTPAGE &") "style.xmldocument.selectnodes (" @ Onclick ") (2) .value =" "" & INTPAGE & "" "style. XMLDocument.selectnodes ("// xsl: for-each / @ selection) (1) .value =" ./* [position () <= "& (cstr (intPage) * intrecordsperpage) &" and position ()> "& (INT (INT (INT (INT (INT (INT (INT (INT (INT (INT (INT (INT (INTPAGE) - END if End Function '" First Page "Function FirstPage () style.xmldocument.selectnodes (" @ onclick ") (" @ @ Onclick ") 1) .Value = "previouspage (1)" style.xmldocument.selectnodes ("@ Onclick") (2) .value = "NextPage (1)" style.xmldocument.selectnodes ("// xsl: for-Each /@select") (1).value = "./* [position () <" & intrecordsperpage 1 & "and position ()> 0]" Transform () setPageCount () End Function ' "last page" is performed Function LastPage () Dim intTotalPages Dim intTotalRecords intTotalPages = getNumberOfPages (intTotalRecords) nextPage (intTotalPages - 1) End Function
Customer Relations <
Customer Relations Watch XMLns: DT = "URN: Schemas-Microsoft-Com: DataTypes"> 01 MI Water @ 21cn.com 02 UYI Lily@sina.com 03 UIYU John@21cn.com 04 DOUG Karry@163.net 05 Ellen Vivki@sina.com 07 < / Number> GREG Meng@mengxianhui.com 08 Harry Sunny@xianhui.net 09 INGRID < Email> Cathy@hotmail.com 10 JEFF Your @ mxh .com 11 kelly iloveyou@mengxianhui.com 12 Larry
