当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用数据岛生成翻页程序

Javascript
JQuery 获取和设置Select选项的代码
jQuery ctrl+Enter shift+Enter实现代码
jQuery学习2 选择器的使用说明
jQuery学习3：操作元素属性和特性
jQuery学习4 浏览器的事件模型
jQuery学习5 jQuery事件模型
jQuery 学习6 操纵元素显示效果的函数
jQuery学习7 操作JavaScript对象和集合的函数
jQuery库与其他JS库冲突的解决办法
JavaScript Event事件学习第一章 Event介绍
JavaScript Event学习第二章 Event浏览器兼容性
JavaScript Event学习第三章 早期的事件处理程序
JavaScript Event学习第四章 传统的事件注册模型
JavaScript Event学习第五章 高级事件注册模型
JavaScript Event学习第六章 事件的访问
JavaScript Event学习第七章 事件属性
JavaScript Event学习第八章 事件的顺序
js png图片(有含有透明)在IE6中为什么不透明了
JavaScript 读取元素的CSS信息的代码
基于mootools的圆角边框扩展代码

No. « 284 285 286 287 »

技术文章搜索

关键字

Javascript 中的 用数据岛生成翻页程序

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 67 ::
收藏到网摘: n/a

<!--张凤民-->

<html>

<head>
<title>Tree walk test - JScript</title>
<style>body         { font-family: 宋体; font-size: 9pt }
.first       { color: gray; text-decoration: none }
.later       { cursor: hand; color: red; text-decoration: none }
</style>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>

<!--
配置说明:width控制当前列的宽度;sortBy排序指向下面的data的tagname;sortType为排序类型,目前支持三种:text,date,number,
也可实现自己的类型,只要修改sort函数就可了
-->
<XML ID="head">
<xmldata>
  <username width="150" sortBy="username" sortType="text">用户名</username>
  <pw width="150" sortBy="pw" sortType="number">密码</pw>
  <date width="200" sortBy="date" sortType="date">日期</date>
</xmldata>
</XML>
<!--
配置说明:isShow,控制此处内容是否显示;isKey是否是主键,1是且内容会在theValue里面显示,0否;
-->
<XML ID="data">
<xmldata>
<row>
  <id isShow="0" isKey="1">1</id>
  <username isShow="1" isKey="1">fmzhang1</username>
  <pw       isShow="1" isKey="1">1</pw>
  <date     isShow="1" isKey="0">2003-3-3</date>
</row>
<row>
  <id isShow="0" isKey="1">2</id>
  <username isShow="1" isKey="1">fmzhang11</username>
  <pw       isShow="1" isKey="1">1</pw>
  <date     isShow="1" isKey="0">2003-3-3</date>
</row>
<row>
  <id isShow="0" isKey="1">3</id>
  <username isShow="1" isKey="1">fmzhang2</username>
  <pw       isShow="1" isKey="1">2</pw>
  <date     isShow="1" isKey="0">2003-3-7</date>
</row>
<row>
  <id isShow="0" isKey="1">4</id>
  <username isShow="1" isKey="1">fmzhang3</username>
  <pw       isShow="1" isKey="1">3</pw>
  <date     isShow="1" isKey="0">2003-5-3</date>
</row>
<row>
  <id isShow="0" isKey="1">5</id>
  <username isShow="1" isKey="1">fmzhang4</username>
  <pw       isShow="1" isKey="1">4</pw>
  <date     isShow="1" isKey="0">2002-3-3</date>
</row>
<row>
  <id isShow="0" isKey="1">6</id>
  <username isShow="1" isKey="1">fmzhang5</username>
  <pw       isShow="1" isKey="1">5</pw>
  <date     isShow="1" isKey="0">2003-1-3</date>
</row>
<row>
  <id isShow="0" isKey="1">7</id>
  <username isShow="1" isKey="1">fmzhang6</username>
  <pw       isShow="1" isKey="1">6</pw>
  <date     isShow="1" isKey="0">2005-1-3</date>
</row>
<row>
  <id isShow="0" isKey="1">8</id>
  <username isShow="1" isKey="1">fmzhang7</username>
  <pw       isShow="1" isKey="1">7</pw>
  <date     isShow="1" isKey="0">2003-5-3</date>
</row>
<row>
  <id isShow="0" isKey="1">9</id>
  <username isShow="1" isKey="1">fmzhang8</username>
  <pw       isShow="1" isKey="1">8</pw>
  <date     isShow="1" isKey="0">2003-1-8</date>
</row>
<row>
  <id isShow="0" isKey="1">10</id>
  <username isShow="1" isKey="1">fmzhang9</username>
  <pw       isShow="1" isKey="1">9</pw>
  <date     isShow="1" isKey="0">2003-11-3</date>
</row>
</xmldata>
</XML>
<body id="objbody" onload="show('first')">

<div id="mydiv">
</div>
<table border="0" cellpadding="2" width="57%">
  <tr>
    <td width="13%"><input type="button" value="首页" onclick="show('first')"></td>
    <td width="14%"><input type="button" value="上一页" onclick="show('prov')"></td>
    <td width="35%"><input type="button" value="下一页" onclick="show('next')"></td>
    <td width="14%"><input type="button" value="最后一页" onclick="show('last')"></td>
    <td width="40%"><input type="text" size="5" maxlength="5" name="pageNum" value onkeydown="if(event.keyCode==13) goPageNum()" onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><input type="button" value="go" onclick="goPageNum()"></td>
  </tr>
  <tr>
    <td width="13%">用户名</td>
    <td width="14%"><input type="text" name="xm" size="10" value></td>
    <td width="35%" nowrap onclick="if(isResult.checked==true) isResult.checked=false;else if(isResult.checked==false) isResult.checked=true"><input type="checkbox" name="isResult" onclick="if(this.checked==true) this.checked=false;else this.checked=true;" value="ON">在当前结果中查找</td>
    <td width="54%" colspan="2"><input type="button" name="search" onclick="search()" value="查找" size="10"></td>
  </tr>
</table>
<table border="0" cellpadding="2" width="100%">
</table>
&nbsp;&nbsp;&nbsp;&nbsp;
<table id="tableSec">
  <tr>
    <td>
      <!--
       添加自己的按钮
    -->
      <input type="button" value="此处添加自定义按钮" onclick="yourFunction()"></td>
  </tr>
</table>

</body>

</html>
<script>
//下面为初始化参数
 var datanodes=data.documentElement.childNodes;
 //下面三行保存副本,供删除以后恢复
 var xmlDoc=document.all("data").XMLDocument;
 var xmlDocTemp=new ActiveXObject("MSXML.DOMDocument");
 xmlDocTemp.appendChild(xmlDoc.documentElement.cloneNode(true));
 
 var totalrow=datanodes.length;//总数据行数
 var pagerow=4;//每页行数
 var totalpage=0;//总页数
 if(totalrow!=0) {
   if(totalrow%pagerow!=0) totalpage=parseInt(totalrow/pagerow)+1;
   else totalpage=parseInt(totalrow/pagerow);
 }
 var currPage=1;//当前页码
 var checkArr=new Array();//是否选中
 var theValueArr=new Array();//记录选中记录的checkbox的value值
 for(var i=0;i<totalrow;i++)
 {
   checkArr[i]=0;//记录选中的记录0为未选中,1为选中,初始为0
   theValueArr[i]="";
 }
 var buildArr=new Array();//保存当前页要生成的记录序号
 var sortOrder='asce';//保存升序还是降序
 
 mydiv.innerText="一共"+totalpage+"页"+totalrow+"条记录,当前为第1页,当前选中0条记录";
 var nodes=head.documentElement.childNodes;
 var nodeslen=nodes.length;
 var attributes=head.documentElement.firstChild.attributes;
 var objform=document.createElement("<FORM name='fjcl'>");
 var objtable=document.createElement("<TABLE bordercolor='#1EC600' border='1'>");
 var objtbody=document.createElement("TBODY");
 objtable.appendChild(objtbody);
</script>
<script language="javascript">
//生成表格头部
function addHead()
{
 var objtr=document.createElement("<TR  bgColor='#FFCCCC'>");
 objtbody.appendChild(objtr);
 var objtd=document.createElement("TD");
 objtd.width="20";
 objtd.innerText=" ";
 objtr.appendChild(objtd);
 for(var i=0;i<nodeslen;i++)
 {
   var objtd=document.createElement("<TD onclick='' onmousemove=''>");
   objtd.width=head.documentElement.childNodes.item(i).getAttribute("width");
   objtd.onmousemove="style.cursor='hand'";
   var sortBy=head.documentElement.childNodes.item(i).getAttribute("sortBy");
   var sortType=head.documentElement.childNodes.item(i).getAttribute("sortType");
   objtd.onclick="sort('"+sortBy+"','"+sortType+"','"+i+"')";
   var tdtext=nodes.item(i).text+"→";
   var objtext=document.createTextNode(tdtext);
   objtd.appendChild(objtext);
   objtr.appendChild(objtd);
 }
 objform.appendChild(objtable);
 objbody.appendChild(objform);
 objbody.appendChild(tableSec);
}
//添加符合条件的记录
function addAll()
{
  var childdatanodes=data.documentElement.childNodes.item(0).childNodes;
  var childtotalrow=childdatanodes.length;//每行下面可能的数据项长度
  for(var i=0;i<buildArr.length;i++)
  {
   
    var objtr;
    if(i%2==0)
    {
       objtr=document.createElement("<TR onmouseover='' bgColor='#80FF80'  class='first' onclick='changeColor()' >");
    }else
    {
       objtr=document.createElement("<TR onmouseover='' bgColor='#FFFF80'  class='first' onclick='changeColor()' >");
    }
    if(checkArr[buildArr[i]-1]==1) objtr.className="later";
    objtr.onmouseover="style.cursor='hand'";
    var thetd=document.createElement("TD");
    var objCheckBox;
    if(checkArr[buildArr[i]-1]==0)
    {
      objCheckBox=document.createElement("<input type='CHECKBOX' name='rad' value='' onclick=''>");
    }else
    {
      objCheckBox=document.createElement("<input type='CHECKBOX' name='rad' value='' onclick='' checked>");
    }
   
    objCheckBox.onclick=objCheckBox.onclick+";if(this.checked==true) checkArr["+parseInt(buildArr[i]-1)+"]='1';else checkArr["+parseInt(buildArr[i]-1)+"]=0";
    thetd.appendChild(objCheckBox);
    objtr.appendChild(thetd);
    for(var j=0;j<childtotalrow;j++)
    {
      var isShow=datanodes.item(buildArr[i]-1).childNodes.item(j).getAttribute("isShow");//是否显示
      var isKey=datanodes.item(buildArr[i]-1).childNodes.item(j).getAttribute("isKey");  //是否是主键
      if(isShow=='1')//isShow=1
      {
         var objtd=document.createElement("<TD onclick=''>");
         var tdtext=document.createTextNode(datanodes.item(buildArr[i]-1).childNodes.item(j).text);
         objtd.appendChild(tdtext);
         objtr.appendChild(objtd);
        
          objtd.onclick=objCheckBox.click;
      }
      if(isKey=='1')
      {
         if(objCheckBox.value=="")
             objCheckBox.value=objCheckBox.value+datanodes.item(buildArr[i]-1).childNodes.item(j).tagName+"="+datanodes.item(buildArr[i]-1).childNodes.item(j).text;
         else
             objCheckBox.value=objCheckBox.value+"&"+datanodes.item(buildArr[i]-1).childNodes.item(j).tagName+"="+datanodes.item(buildArr[i]-1).childNodes.item(j).text;
      }
    }
    theValueArr[buildArr[i]-1]=objCheckBox.value;
    objtbody.appendChild(objtr);
  }
  objform.appendChild(objtable);
  objbody.appendChild(objform);
  objbody.appendChild(tableSec);
}
//翻页按钮操作
function show(thePage)
{
  if(totalrow==0)
  {
   del();
   addHead();
   return false;
   }
  if(thePage=="first")
  {
    del();
    addHead();
     buildArr=new Array();
    if(totalrow>=pagerow){
       for(var i=1;i<=pagerow;i++)
          buildArr[i-1]=i;
    }else{
       for(var i=1;i<=totalrow;i++)
          buildArr[i-1]=i;
    }
    addAll();
    currPage=1;
  }else if(thePage=="prov")
  {
    if(currPage==1) return false;
    del();
    addHead();
    buildArr=new Array();
    for(var i=1;i<=pagerow;i++){
      buildArr[i-1]=(currPage-2)*pagerow+i;
    }
    addAll();
    currPage=currPage-1;
  }else if(thePage=="next")
  {
    if(currPage==totalpage) return false;
    del();
    addHead();
    buildArr=new Array();
    if((currPage+1)*pagerow>=totalrow){
       for(var i=1;i<=totalrow-currPage*pagerow;i++)
          buildArr[i-1]=currPage*pagerow+i;
    }else {
      for(var i=1;i<=pagerow;i++)
          buildArr[i-1]=currPage*pagerow+i;
    }
     addAll();
    currPage=currPage+1;
  }else if(thePage=="last")
  {
    if(currPage==totalpage) return false;
    del();
    addHead();
    buildArr=new Array();
    if(totalrow%pagerow==0){
      for(var i=1;i<=pagerow;i++)
         buildArr[i-1]=totalrow-pagerow+i;
    }else{
      for(var i=1;i<=totalrow%pagerow;i++)
         buildArr[i-1]=totalrow-totalrow%pagerow+i;
    }
    addAll();
    currPage=totalpage;
  }
  changeMyDiv();
}
//删除objform下面的所有内容
function del()
{
 objform.removeNode(true);
 objform=document.createElement("<FORM name='fjcl'>");
 objtable=document.createElement("<TABLE bordercolor='#1EC600' border='1'>");
 objtbody=document.createElement("TBODY");
 objtable.appendChild(objtbody);
}
//改变颜色
function changeColor()
{
 for(var i=0;i<objtbody.childNodes.length-1;i++)
 {
   var theRow=buildArr[i]-1;
   if(checkArr[theRow]==0)
   {
     objtbody.childNodes.item(i+1).className="first";
   }
   else
   {
     objtbody.childNodes.item(i+1).className="later";
   } 
 }
 changeMyDiv();
}
function changeMyDiv()
{
 var totalChecked=0;//记录当前选中记录数
 for(var i=0;i<totalrow;i++)
 {
   if(checkArr[i]==1) totalChecked+=1;
 }
 mydiv.innerText="一共"+totalpage+"页"+totalrow+"条记录,当前为第"+currPage+"页,当前选中"+totalChecked+"条记录";
}

function showValue()
{
  var str="";
  var str2="";
  for(var i=0;i<totalrow;i++)
  {
    str+=checkArr[i]+";";
    if(checkArr[i]==1) str2+=theValueArr[i]+";";
  }
  alert(str);
  alert(str2);
}
//跳转到某个页
function goPageNum()
{
  var page=pageNum.value;
  if(totalrow==0)
  {
    alert("没有可操作的记录!");
    return false;
  }
  if(page.length==0)
  {
     alert("请输入要跳转的页码!");
     return false;
  }
  if(parseInt(page)==0||parseInt(page)>totalpage)
  {
    alert("输入页码应介于1和"+totalpage+"之间!");
    return false;
  }
  if(page==currPage) return false; 
  if(page==1)
  {
    show('first');
  }else if(page==totalpage)
  {
    show('last');
  }else
  {
    del();
    addHead();
    buildArr=new Array();
    for(var i=0;i<pagerow;i++){
      buildArr[i]=(page-1)*pagerow+i+1;
    }
    addAll();
    currPage=page;
  }
  changeMyDiv();
}
function yourFunction()
{
  if(totalrow==0)
  {
    alert("没有可操作的记录!");
    return false;
  }
  var totalChecked=0;//记录当前选中记录数
  for(var i=0;i<totalrow;i++)
  {
    if(checkArr[i]==1) totalChecked+=1;
  }
  if(totalChecked==0)
  {
    alert("没有选中记录,请选择后进行操作!");
    return false;
  }
  var pk='';
  for(var i=0;i<totalrow;i++)
  {
    if(checkArr[i]==1)
      pk+=theValueArr[i]+";";
  }
  alert(pk);
  <!--
  //  此处添加你要的操作
  -->
}
</script>
<script>
//以下实现对不同数据类型进行排序
//比较两个字符串
function compare_text(text1,text2)
{
  if(text1>text2) return 1;
  else return 0;
}
//比较两个数字的大小(按浮点数)
function compare_number(number1,number2)
{
  if(parseFloat(number1)>parseFloat(number2)) return 1;
  else return 0;
}
//比较两个日期的大小
function compare_date(kssj,jssj)
{
  var kssjArr=kssj.split("-");
  var jssjArr=jssj.split("-");
  var date1=new Date(kssjArr[0],kssjArr[1],kssjArr[2]);
  var date2=new Date(jssjArr[0],jssjArr[1],jssjArr[2]);
  if(date1>date2) return 1;
  else return 0;
}
</script>
<script>
//点击排序按钮时执行此函数
function sort(sortBy,sortType,sortNum)
{
if(data.documentElement.childNodes.length==0) return false;
  var sortByArr=new Array();
  for(var i=0;i<buildArr.length;i++){
    sortByArr[i]=datanodes.item(buildArr[i]-1).getElementsByTagName(sortBy).item(0).text;
  } 
  if(sortOrder=='asce') {   //升序
    for(var i=0;i<buildArr.length;i++){
       for(var j=0;j<buildArr.length-1;j++){
         var tempArr;
         var tempSort;
         if(sortType=='text'){
             if(compare_text(sortByArr[j],sortByArr[j+1])==1){
                 tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr;
                 tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort;
             }
         }else if(sortType=='number'){
             if(compare_number(sortByArr[j],sortByArr[j+1])==1){
                 tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr;
                 tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort;
             }
         }else if(sortType=='date'){
             if(compare_date(sortByArr[j],sortByArr[j+1])==1){
                tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr;
                 tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort;
             }
         }
       }
    }
    sortOrder="desc";
  } else if(sortOrder=='desc'){  //降序
    for(var i=0;i<buildArr.length;i++){
       for(var j=0;j<buildArr.length-1;j++){
         var tempArr;
         var tempSort;
         if(sortType=='text'){
             if(compare_text(sortByArr[j],sortByArr[j+1])==0){
                tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr;
                 tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort;
             }
         }else if(sortType=='number'){
             if(compare_number(sortByArr[j],sortByArr[j+1])==0){
                tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr;
                 tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort;
             }
         }else if(sortType=='date'){
             if(compare_date(sortByArr[j],sortByArr[j+1])==0){
                tempArr=sortByArr[j];sortByArr[j]=sortByArr[j+1];sortByArr[j+1]=tempArr;
                 tempSort=buildArr[j];buildArr[j]=buildArr[j+1];buildArr[j+1]=tempSort;
             }
         }
       }
    }
    sortOrder="asce";
  }
    del();
    addHead();
    addAll();
    if(sortOrder=="asce"){
       objtable.rows[0].cells[parseInt(sortNum)+1].innerText=nodes.item(parseInt(sortNum)).text+"↓";
    }else{
       objtable.rows[0].cells[parseInt(sortNum)+1].innerText=nodes.item(parseInt(sortNum)).text+"↑";
    }
}
//在原有结果中查找时也删除data的所有node,然后把xmlDocTemp的所有node复制到data里面
function delAllNode()
{
  var len=datanodes.length;
  for(var i=0;i<len;i++)
  {
    datanodes.item(i).parentNode.removeChild(datanodes.item(i));
    i-=1;
    len-=1;
  }
}
//此函数实现在结果中查找符合条件的记录
function search()
{
  if(isResult.checked==false)
  {
    delAllNode();
    var xmlDocTempLen=xmlDocTemp.documentElement.childNodes.length;
    for(var i=0;i<xmlDocTempLen;i++)
    {
       data.documentElement.appendChild(xmlDocTemp.documentElement.childNodes.item(i).cloneNode(true));   
    }
    datanodes=data.documentElement.childNodes;
  
  }
  var nodeLen=datanodes.length;
  for(var i=0;i<nodeLen;i++)
  {
    if(!isShow(i)) //不符合条件的删除
    {
      datanodes.item(i).parentNode.removeChild(datanodes.item(i));
      i-=1;
      nodeLen-=1;
    }
  }
 
 totalrow=datanodes.length;//总数据行数
 totalpage=0;//总页数
 if(totalrow!=0) {
   if(totalrow%pagerow!=0) totalpage=parseInt(totalrow/pagerow)+1;
   else totalpage=parseInt(totalrow/pagerow);
 }
 currPage=1;//当前页码
 checkArr=new Array();//是否选中
 theValueArr=new Array();//记录选中记录的checkbox的value值
 for(var i=0;i<totalrow;i++)
 {
   checkArr[i]=0;//记录选中的记录0为未选中,1为选中,初始为0
   theValueArr[i]="";
 }
 buildArr=new Array();//保存当前页要生成的记录序号
 sortOrder='asce';//保存升序还是降序
 mydiv.innerText="一共"+totalpage+"页"+totalrow+"条记录,当前为第1页,当前选中0条记录";
 show('first');
}
//下面这个函数需要你自己实现,符合条件的记录(要显示)返回true,否则返回false
function isShow(nodeNo)
{

  var myxm=xm.value;
  var temp=datanodes.item(nodeNo).getElementsByTagName("username");
  if(temp.item(0).text.indexOf(myxm)!=-1) return true;
  return false;

}
</script>