编写好首页后,开始编写查询模块的页面,首先我们编写view0.html网页,打开记事本,在里面输入下列代码:
实例代码11-14
<HTML>
<head>
<title>查询显示页面</title>
<script language = "JavaScript">
function ViewRecords()
{
products.dataPageSize=items.value;
products.firstPage();
}
function FirstPage()
{
products.firstPage();
}
function NextPage()
{
products.nextPage();
}
function LastPage()
{
products.lastPage();
}
function PrevPage()
{
products.previousPage();
}
</script>
</head>
<body bgcolor="aqua">
<h1 align=center>
<xml id="dos" src="Client.xml"></xml>
<center>
<input type="button" value="第一页" οnclick="FirstPage()">
<input type="button" value="上一页" οnclick="PrevPage()">
<input type="button" value="下一页" οnclick="NextPage()">
<input type="button" value="最后一页" οnclick="LastPage()">
<BR></BR>
请输入一页中要查看的记录数:<input type="text" maxlength="1" size="2" id="items" name="na1">
<input type="button" value="查看" οnclick="ViewRecords()">
<table id="products" border=2 width="80%" datasrc="#dos">
</center>
<thead>
<th>客户姓名</th>
<th>客户住址</th>
<th>联系方式</th>
<th>客户爱好</th>
<th>客户职业</th>
</thead>
<tr>
<td><span datafld="客户姓名"></span></td>
<td><span datafld="客户住址"></span></td>
<td><span datafld="联系方式"></span></td>
<td><span datafld="客户爱好"></span></td>
<td><span datafld="客户职业"></span></td>
</tr>
</table>
</body>
</HTML>
将该文件保存,文件名为view0.html,该文件保存的位置在Example文件夹下。在代码中嵌入了JavaScript脚本程序,在脚本中创建了四个函数,用来完成分页显示并可以指定显示记录数目的功能。首先使用数据岛技术在html代码中绑定一个XML文件,即刚才用model1.jsp生成的“Client.xml”文件,使用“<table id="products" border=2 width="80%" datasrc="#dos">“把数据岛对象dos和表格绑定,在这里并为表格指定了一个id名称products,JavaScript就是通过这个id名称来操作绑定在html里面的数据。
若在“view.jsp”中单击【显示全部信息】按钮,就显示一个如图11-30窗口,
图11-30 【XML数据信息显示】窗口
在该窗口中会把XML文档里面的数据以指定的样式全部显示出来,这时在“请输入一页中要查看的记录数”文本框中输入要查看的页数,如2页,单击查看【会显】按钮,会显示如图所示11-31所示的窗口,
图11-31 【指定记录数显示】窗口