Inicio>Tutorial de programación de red>Tutorial XML

Paginación xml_javascript

Autor：Eve Cole Fecha de actualización：2009-07-07 16:22:09
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<cabeza>
<title>龙的传人--Xml_javascript分页</title>

</cabeza>
<cuerpo onload="getxmlDoc()">
<script idioma="javascript" tipo="texto/javascript">
var xmlDoc;
var índice de nodo;
var índice de página;
var tamaño de página = 13;
var última página; //最后一页
var overSize //最后一页的记录数
función getxmlDoc()
{
xmlDoc=nuevo ActiveXObject("Microsoft.XMLDOM");
var currNodo;
xmlDoc.async=falso;
xmlDoc.load("miPrueba.xml");
si(xmlDoc.parseError.errorCode!=0)
{
var myErr=xmlDoc.parseError;
alert("出错！"+myErr.reason);
}
getRecordCount();
enPrimero();

}
función obtenerRecordCount()
{
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%tamañodepágina;
si(sobretamaño>0)
{
lastPage=recordCount-overSize;
}
demás
{
lastPage=recordCount-tamaño de página;
}

}
función getPageRecord(pageIndex,pageSize)
{
clearRow("miTabla");
var personNode= xmlDoc.selectNodes("/Root")[0];
var currNode=personNode.childNodes[pageIndex];
para(var i=pageIndex;i<pageIndex+pageSize;i++)
{
var arr=nueva matriz();
var nNode= xmlDoc.selectSingleNode("Raíz/Persona["+i+"]");
arr[0]=nNodo.getAttribute("Identificación"); //序号
arr[1]=nNodo.childNodes[0].texto; //工号
arr[2]=nNodo.childNodes[1].text; //姓名
arr[3]=nNodo.childNodes[2].text; //性别
arr[4]=nNodo.childNodes[3].text; //部门
arr[5]=nNodo.childNodes[4].text; //职位
arr[6]=nNodo.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,"miTabla",arr);
}
}
función enPrimera()
{
índice de página=0;
var currIndex=pageIndex;
getPageRecord(índice actual,tamaño de página)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;
}
función enAnterior()
{
var currIndex=pageIndex;
currIndex-=tamaño de página;
getPageRecord(índice actual,tamaño de página)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;

}
función enSiguiente()
{
var currIndex=pageIndex;
currIndex+=tamaño de página;
getPageRecord(índice actual,tamaño de página)
pageIndex=currIndex;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
document.getElementById("txtCurrPageRecord").value=pageSize;

}
función enLast()
{
si(sobretamaño>0)
{
getPageRecord(última página,sobretamaño)
document.getElementById("txtCurrPageRecord").value=overSize;
}
demás
{
getPageRecord(últimaPágina,tamaño de página)
document.getElementById("txtCurrPageRecord").value=pageSize;
}
pageIndex=últimaPágina;
document.getElementById("txtCurrPage").value=(pageIndex / pageSize) + 1;
}
función a la página()
{
var index=document.getElementById("txtCurrPage").valor
var currIndex=(index-1)*tamaño de página;
si(event.keyCode==13)
{
getPageRecord(currIndex,pageSize);
}
pageIndex=currIndex;
}
función agregarFila(i,dataGridId,arr)
{
var fila=document.createElement("tr");
var celda=createCellWidthText(i);
fila.appendChild(celda);
para(var j=0;j<arr.length;j++)
{
celda=createCellWidthText(arr[j]);
fila.appendChild(celda);
}
document.getElementById(dataGridId).firstChild.appendChild(fila);
}
función crearCellWidthText(texto)
{
var celda = document.createElement("td");
var textNode = document.createTextNode(texto);
celular.appendChild(textNode);
celda de retorno;
}
función borrar fila (obj)
{
var tabla=document.getElementById(obj);
var nodoTbody=table.firstChild
var longitud=nodeTbody.childNodes.length;
para(var i=longitud-1;i>0;i--)
{
nodoTbody.removeChild(nodoTbody.childNodes[i]);
}
}
</script>
<formulario id="form1" runat="servidor">
<div>
<table align="center" style="border-right: #0033ff sólido delgado; borde superior: #0033ff sólido delgado;
borde izquierdo: #0033ff sólido delgado; ancho: 650 px; borde inferior: #0033ff sólido delgado">
<tr>
<td>
共<input id="txtPageCount" name="txtPageCount" style="ancho: 33px; color: #0000ff; estilo de borde superior: ninguno; estilo de borde derecho: ninguno; estilo de borde izquierdo: ninguno; fondo -color: transparente; estilo de borde inferior: ninguno;" type="text" onkeydown="toPage()"/>页/
<input id="txtRecordCount" nombre="txtRecordCount" estilo="ancho: 46px; color: #3300ff; estilo de borde superior: ninguno; estilo de borde derecho: ninguno; estilo de borde izquierdo: ninguno; fondo- color: transparente; estilo de borde inferior: ninguno;" type="text" onkeydown="toPage()"/>条记录
<input id="btnFirst" tipo="botón" valor="首页" onclick="onFirst()"/>
<input id="btnPrev" tipo="botón" valor="上一页" onclick="onPrev()"/>
<input id="btnNext" tipo="botón" valor="下一页" onclick="onNext()"/>
<input id="btnLast" tipo="botón" valor="尾页" onclick="onLast()"/>
第<input id="txtCurrPage" name="txtCurrPage" style="ancho: 46px; color: #ff3333;" tipo="texto" onkeydown="toPage()"/>
页(当前页<input id="txtCurrPageRecord" name="txtCurrPageRecord" style="ancho: 22px; color: #ff3333; estilo de borde superior: ninguno; estilo de borde derecho: ninguno; estilo de borde izquierdo: ninguno; color de fondo: blanco; estilo de borde inferior: ninguno;" type="text" onkeydown="toPage()"/>条记录）</td>
</tr>
<tr>
<td>
&nbsp;<ancho de tabla="100%" id="miTabla">
<tr estilo="color-de-fondo:Amarillo">
<td estilo="ancho: 34px; alto: 21px;">
identificación</td>
<td estilo="ancho: 34px; alto: 21px;">
序号</td>
<td estilo="ancho: 42px; alto: 21px;">
工号</td>
<td estilo="ancho: 36px; alto: 21px;">
姓名</td>
<td estilo="ancho: 39px; alto: 21px;">
性别</td>
<td estilo="ancho: 43px; alto: 21px;">
部门</td>
<td estilo="ancho: 50px; alto: 21px;">
职位</td>
<td estilo="ancho: 100px; alto: 21px;">
地址</td>
</tr>
</tabla>
</td>
</tr>
</tabla>

</div>
</formulario>
</cuerpo>
</html>
Siguiente: http://home.goofar.com/lkc311/Default.htm
Artículos relacionados