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

Javascript
jQuery代码:jQuery控制表单里的回车键
用DIV完美模拟createPopup 弹出窗口(脚本之家修正版)，支持Firefox,ie,chrome
jQuery Flash/MP3/Video多媒体插件
9个JavaScript评级/投票插件
JS实现的radio图片选择按钮效果
IE中checkbox在刷新后初始化的问题
JavaScript 学习笔记（十一）
JS 对象介绍
javascript 哈希表(hashtable)的简单实现
jquery 防止表单重复提交代码
js parsefloat parseint 转换函数
javascript parseInt与Number函数的区别
JavaScript 学习笔记（十二） dom
JavaScript 学习笔记（十三）Dom创建表格
javascript 实现自由落体的方块效果
javascript 获取url参数和script标签中获取url参数函数代码
JAVASCRIPT style 中visibility和display之间的区别
javascript 拖放效果实现代码
jquery last-child 列表最后一项的样式
Jquery实战_读书笔记1—选择jQuery

No. « 279 280 281 282 »

技术文章搜索

关键字

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

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