Creating and Using XML Documents - HTML5 and CSS Comprehensive - page 592

To Enter Code to Link an XML Document with an HTML Web Page

Because embedding the binding tags for an XSD or XSL file prevents the HTML table from reading the XML
file, this section will use a different XML file provided in the Data Files for Students, chapter12-1product_id.xml.
This file is in item-id order. The following step binds this XML file with an HTML Web page.

1

•

With the chapter12-

1table_solution.html
Notepad++ window
active, click line 3.

do not press
e n t e r key

• <xml
id="dsoTableList"
src="chapter12-
1product_
id.xml"></xml>
to link the XML
document to the HTML
Web page. Do not press
the e n t e r key (Figure 12-31).

Type

XML tag and attributes to
define data source ID, URL
of data source, and link to
HTML document

Figure 12-31

Adding Navigation Controls
The next step is to enter code to add the four navigation buttons that allow a user to
manipulate the number of records that display on the HTML Web page. Each of the four
buttons calls an element method that will display the records in the table. Table 12-31 lists
four table element methods.

Table 12-31 Table Element Methods

Method Action Example Code

irstPage Displays the first page of records TableName.firstPage()

previousPage Displays the previous page of records TableName.previousPage()

nextPage Displays the next page of records TableName.nextPage()

lastPage Displays the last page of records TableName.lastPage()

To Enter Code to Add Navigation Buttons

The buttons used to navigate through the records are standard HTML <form> buttons, but are entered
without a form. When a user clicks a button, the onClick event handler calls the associated built-in method.
Table 12-32 shows the code to add the navigation buttons to the HTML Web page.

Table 12-32 Code for Adding Navigation Buttons

Line Code

<button type="button" onClick="inventoryStock.firstPage()">|&lt; Start </button>&nbsp;&nbsp;

53

<button type="button" onClick="inventoryStock.previousPage()">&lt; Previous Items
</button>&nbsp;&nbsp;

54

<button type="button" onClick="inventoryStock.nextPage()"> Next Items &gt; </button>&nbsp;&nbsp;

55

<button type="button" onClick="inventoryStock.lastPage()"> Last Items &gt;| </button>

56