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

Javascript
颜色变换 像字符逐字输入的欢迎词
CSS 伪类实现的鼠标滑动图片链接
百度用到的Js日历 大家可以看看
CSS 渐变背景的6个演示代码
Jquery 弹出层插件实现代码
Javascript 模式实例 观察者模式
[原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
javascript window对象属性整理
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
理解 JavaScript 预解析
理解JavaScript变量作用域更轻松
JavaScript的变量作用域深入理解
javascript写的一个链表实现代码
Js 打字效果 逐一出现的文字
javascript 走马灯效果的链接提示
CSS 动态链接提示
JavaScript 事件的一些重要说明
JavaScript 三种不同位置代码的写法

No. « 266 267 268 269 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 92 ::
收藏到网摘: 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>