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>


猜你喜欢
- 1. 正文1.1下载和安装软件本文我会通过miniconda+jupyter lab的形式带大家安装opencv;有很多朋友会问为什么不是a
- 批量更新不同表的数据今天翻到以前写的批量更新表中的数据的存储过程,故在此做一下记录。当时MySQL中的表名具有如下特征,即根据需求将业务表类
- 手写数字识别(小白入门)今早刚刚上了节实验课,关于逻辑回归,所以手有点刺挠就想发个博客,作为刚刚入门的小白,看到代码运行成功就有点小激动,这
- 在进行python数据分析的时候,首先要进行数据预处理。有时候不得不处理一些非数值类别的数据,嗯, 今天要说的就是面对这些数据该如何处理。目
- #/bin/sh #检测mysql server是否正常提供服务 mysqladmin -u sky -ppwd -h localhost
- 整个安装流程如下: 1,首先安装apache:我安装的版本是: httpd-2.2.16-win32-x86-openssl-0.9.8o.
- 在django的views中不论是用类方式还是用装饰器方式来使用rest框架,django_rest_frame实现权限管理都需要两个东西的
- 刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下;导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航
- 序篇天气真的很热啊… 很想有一杯冰冰凉凉的奶茶来解渴~但是现在奶茶店这么多, 到底哪一家最好喝、性价比最高呢?数据获取
- 一、概念介绍嵴线图(ridgeline plot),用来展示同一维度的几个数据的分布情况,每一层嵴线(峰峦)都是一个直方图或者密度图,层层堆
- 循环是所有编程语言中最为重要的机制之一,几乎任何拥有实际意义的计算机程序(排序、查询等)都里不开循环。 而循环也正是程序优化中非常让人头疼的
- 本文实例讲述了Python实现的服务器。分享给大家供大家参考,具体如下:python - 单进程服务器#coding=utf-8from s
- 字符串和切片(string and slice)string底层就是一个byte的数组,因此,也可以进行切片操作。package maini
- 1.先找到迁移服务器上的Data文件,我安装的是mysql5.7,默认安装的路径。那么就是在C:\ProgramData\MySQL文件里面
- 功能点显示日期时间显示树莓派当前局域网IP显示当前UP主粉丝数显示B站未读消息显示B站视频总计播放数显示视频总计获赞数显示总计获得充电次数显
- GO项目目录解释src存放源代码pkg编译后生成的文件bin编译后生成的可执行文件背景在src目录下,新建文件test.go,编写代码。控制
- 第一种方法:在php.ini文件里改变display_errors和error_reporting的值,没有的直接加上; 第一处修改; di
- 基数排序法又称桶子法(bucket sort)或bin sort,顾名思义,它是透过键值的部份资讯,将要排序的元素分配至某些"桶&
- 经常有网友会问,SQL Server占用了太多的内存,而且还会不断的增长;或者说已经设置了使用内存,可它没有用到那么多,这是怎么一回事儿呢?
- 更新MySQL随意字段里的数据下面是我的mysql所有字段名若字段名太多不建议使用以下方法这里sql语句要注意一下双引号里面用单引号.def