Xml_javascript分页
来源:互联网 发布时间:2008-09-04 14:43:00
Xml_javascript分页实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>龙的传人--Xml_javascript分页</title>
</head>
<body onload="getxmlDoc()">
<script language="javascript" type="text/javascript">
var xmlDoc;
var nodeIndex;
var pageIndex;
var pageSize=13;
var lastPage; //最后一页
var overSize //最后一页的记录数
function getxmlDoc()
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
var currNode;
xmlDoc.async=false;
xmlDoc.load("myTest.xml");
if(xmlDoc.parseError.errorCode!=0)
{
var myErr=xmlDoc.parseError;
alert("出错!"+myErr.reason);
}
getRecordCount();
onFirst();
}
function getRecordCount()
{
var personNode= xmlDoc.selectNodes("/Root")[0];
var recordCount=personNode.childNodes.length;
var pageCount=Math.ceil(recordCount/pageSize);
document.getElementById("txtPageCount").value=pageCount;
document.getElementById("txtRecordCount").value=recordCount;
overSize=recordCount%pageSize;
if(overSize>0)
{
lastPage=recordCount-overSize;
}
else
{
lastPage=recordCount-pageSize;
}
}
function getPageRecord(pageIndex,pageSize)
{
clearRow("myTable");
var personNode= xmlDoc.selectNodes("/Root")[0];
var currNode=personNode.childNodes[pageIndex];
for(var i=pageIndex;i<pageIndex+pageSize;i++)
{
var arr=new Array();
var nNode= xmlDoc.selectSingleNode("Root/Person["+i+"]") ;
arr[0]=nNode.getAttribute("Id"); //序号
arr[1]=nNode.childNodes[0].text; //工号
arr[2]=nNode.childNodes[1].text; //姓名
arr[3]=nNode.childNodes[2].text; //性别
arr[4]=nNode.childNodes[3].text; //部门
arr[5]=nNode.childNodes[4].text; //职位
arr[6]=nNode.childNodes[5].text; //地址
// arr[0]=personNode.childNodes[i].getAttribute("Id"); //序号
// arr[1]=personNode.childNodes[i].childNodes[0].text; //工号
// arr[2]=personNode.childNodes[i].childNodes[1].text; //姓名
// arr[3]=personNode.childNodes[i].childNodes[2].text; //性别
// arr[4]=personNode.childNodes[i].childNodes[3].text; //部门
// arr[5]=personNode.childNodes[i].childNodes[4].text; //职位
// arr[6]=personNode.childNodes[i].childNodes[5].text; //地址
addRow(i+1,"myTable",arr);
}
}
function onFirst()
{
pageIndex=0;
var currIndex=pageIndex;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex ;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
function onPrev()
{
var currIndex=pageIndex;
currIndex-=pageSize;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
function onNext()
{
var currIndex=pageIndex;
currIndex+=pageSize;
getPageRecord(currIndex,pageSize)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
function onLast()
{
if(overSize>0)
{
getPageRecord(lastPage,overSize)
document.getElementById("txtCurrPageRecord").value=overSize;
}
else
{
getPageRecord(lastPage,pageSize)
document.getElementById("txtCurrPageRecord").value=pageSize;
}
pageIndex=lastPage;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
}
function toPage()
{
var index=document.getElementById("txtCurrPage").value
var currIndex=(index-1)*pageSize;
if(event.keyCode==13)
{
getPageRecord(currIndex,pageSize);
}
pageIndex=currIndex;
}
function addRow(i,dataGridId,arr)
{
var row=document.createElement("tr");
var cell=createCellWidthText(i);
row.appendChild(cell);
for(var j=0;j<arr.length;j++)
{
cell=createCellWidthText(arr[j]);
row.appendChild(cell);
}
document.getElementById(dataGridId).firstChild.appendChild(row);
}
function createCellWidthText(text)
{
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
return cell;
}
function clearRow(obj)
{
var table=document.getElementById(obj);
var nodeTbody=table.firstChild
var length=nodeTbody.childNodes.length;
for(var i=length-1;i>0;i--)
{
nodeTbody.removeChild(nodeTbody.childNodes[i]);
}
}
</script>
<form id="form1" runat="server">
<div>
<table align="center" style="border-right: #0033ff thin solid; border-top: #0033ff thin solid;
border-left: #0033ff thin solid; width: 650px; border-bottom: #0033ff thin solid">
<tr>
<td>
共<input id="txtPageCount" name="txtPageCount" style="width: 33px; color: #0000ff; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; border-bottom-style: none;" type="text" onkeydown="toPage()"/>页/
<input id="txtRecordCount" name="txtRecordCount" style="width: 46px; color: #3300ff; border-top-style: none; border-right-style: none; border-left-style: none; background-color: transparent; border-bottom-style: none;" type="text" onkeydown="toPage()"/>条记录
<input id="btnFirst" type="button" value="http://www.knowsky.com/首页" onclick="onFirst()"/>
<input id="btnPrev" type="button" value="http://www.knowsky.com/上一页" onclick="onPrev()"/>
<input id="btnNext" type="button" value="http://www.knowsky.com/下一页" onclick="onNext()"/>
<input id="btnLast" type="button" value="http://www.knowsky.com/尾页" onclick="onLast()"/>
第<input id="txtCurrPage" name="txtCurrPage" style="width: 46px; color: #ff3333;" type="text" onkeydown="toPage()"/>
页(当前页<input id="txtCurrPageRecord" name="txtCurrPageRecord" style="width: 22px; color: #ff3333; border-top-style: none; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none;" type="text" onkeydown="toPage()"/>条记录)</td>
</tr>
<tr>
<td>
<table width="100%" id="myTable">
<tr style="background-color:Yellow">
<td style="width: 34px; height: 21px;">
Id</td>
<td style="width: 34px; height: 21px;">
序号</td>
<td style="width: 42px; height: 21px;">
工号</td>
<td style="width: 36px; height: 21px;">
姓名</td>
<td style="width: 39px; height: 21px;">
性别</td>
<td style="width: 43px; height: 21px;">
部门</td>
<td style="width: 50px; height: 21px;">
职位</td>
<td style="width: 100px; height: 21px;">
地址</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
猜你喜欢
- 在MySQL数据库中导出整个数据库:1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
- 前言:看本教程,必须先仔细看前言的内容,否则会进入误区!最近在做个性休闲服装内网站的设计课程,过程中发现,个性元素的应用成为最难的问题,第一
- 所谓天赋(左脑和右脑)也就是你是否有艺术天赋,天赋也许是存在的,这主要在于人类左右脑的分工。左脑主要负责逻辑理解、语言、判断、分类、分析、推
- 提叻一个代码段,要人帮助解释一下。代码如下:declare type t_indexby is ta
- 网络开发的在分页上要是遇到数(几十)万以上的数据还是用ADO那样的分页会速度很慢的。有了存储过程速度就快多了。下面是本人用50万的数据进行的
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 11 - Using Fx.Morph, Fx O
- 昨天在得写“RSS收藏”栏目展现的时候我让RSS的列表用弹出的形式展现了,开始是直接的控制 style.display 来做的,但是感觉有点
- Debian Etch Linux上成功安装了MySQL 5.0.27 icc版本,并使用JDBC测试中文成功!中文问题的关键是全部使用UT
- 今天我去隽辰的博客去看他的文章,在读完他的文章之后,我很自然的就去读网友们给他留的评论,在读的时候我发现他的评论是顺序的,也就是最早的评论在
- 我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用I
- 前几天帮人调试一个ASP+SQL2000+IIS5.1/6.0的网站程序,调试过程中遇到的问题如下:一、 SQLServer登录 原先存在备
- 思想:4个数字的排列,加上3个运算符的排列,使用后缀表达式的表现如下:情形一:1,2,3,4,+,-,* => 24*24*4情形二:
- 设计页面时,经常会从一个页面打开一个子窗口以供浏览者查看。通常,这种子窗口中的内容一经浏览者看过,对于浏览者而言就不再需要,而他们常常会忘记
- 在ACCESS中更改控件的默认属性 Lisa Friedrichsen, 欧弗兰帕克,堪萨斯州 如果您在设计一个Microsoft ACCE
- 随滚动条移动的DIV层js代码,无论你的滚动条到哪里这个DIV层就跟到哪里!代码中例举了五个方向的滚动div层例子:包括左上方的div,左下
- 这是Smashing Magazine花费几个月的时间研究编写的2009 年Web设计风格与潮流,Smashing Magazine 的编辑
- 虽然大多数web文档的顶部都有doctype声明,但很多人都没有注意它。它是在你新建一个文档时,由web创作软件草率处理的众多细节之一。虽然
- hmac主要应用在身份验证中,它的使用方法是这样的:1. 客户端发出登录请求(假设是浏览器的GET请求)2. 服务器返回一个随机值,并在会话
- 在默认情况下,大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p
- 用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手,它可以使窗口显得清爽整洁而且富有动感,笔者的几个朋友都想在自己的网页中加入类似的东东,经