各位大哥，滚动条如何分页

各位大哥，滚动条如何分页,这是我的代码，怎么修改下?<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
 <script type="text/javascript">


function user( )
{

  
  
   var result ="<table border=1><tr><td>ID</td><td>Name</td><td>Class</td></tr>";
   for (var i=0;i<18;i++)
   {
     result +="<tr>";
    
     result +="<td>"+i+"</td>";
     result +="<td>"+i+"</td>";
     result +="<td>"+i+"</td>";
     result +="</tr>";
   }
   result +="</table>";
   document.getElementById("xianshi").innerHTML=result;
   }
</script>  
  </head>
  
  <body  onload="user( )">
  
  <div id="cc" style="height:250px;width:200px;overflow-y:scroll;overflow-x:hidden;"> 
  
  
   <div   style="overflow:auto;height:80">   
    <div id="xianshi" >   </div>
<p>如何实现分页呢</p>
</div>
</div>   </body>
</html>

解决方案 »

  1.   

    是这样的，大家看这个例子http://bbs.okajax.com/demo/4/index2.html我想把上面的滑块分页，换成右边的滚动条分页.
      

  2.   

    采用滑块效果+Ajax获取数据滑块效果见：http://www.scriptlover.com/controls/SliderBlock/
    更多效果以及下载：http://www.scriptlover.com/controls/main.htmlAjax获取数据见：Google搜索
      

  3.   

    是不是这种效果<html>
    <head>
    <title>AJAX Slider Sample</title>
    <!-- 以下导入相关的javascript文件-->
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/YAHOO.js" ></script>
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/log.js" ></script>
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/color.js" ></script>
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/key.js" ></script>
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/event.js" ></script>
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/dom.js" ></script>
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/animation.js" ></script>
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/dragdrop.js" ></script>
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/slider.js" ></script>
    <!--prototype类文件,用于发送AJAX请求-->
    <script type="text/javascript" src="http://bbs.okajax.com/demo/4/js/prototype.js" ></script></head>
    <!-- 网页加载后调用init方法创建一个滑块-->
    <body  onLoad="init();"><form name="form1" id="form1">
    总  记  录  数：<input type="text" value="200" id="totlenum" name="totlenum">
    <br>
    每页显示记录数：<input type="text" value="10" id="strlen" name="strlen"><input name="" type="button" value="执行" onClick="init();"></form>
    <br><br>
    <script type="text/javascript">
    var mySlide;
    var myAjax;
    var totlenum = document.form1.totlenum.value;
    var everynum = document.form1.strlen.value;
    var maxpage =Math.ceil(totlenum/everynum);
    function init(){
    totlenum = document.form1.totlenum.value;
    everynum = document.form1.strlen.value;
    maxpage =Math.ceil(totlenum/everynum);  document.getElementById("pageInfo").innerHTML=1+"/"+"共"+maxpage+"页";
      postAjax();
    }
    function postAjax()
    { document.getElementById("data").innerHTML="loading.......";
      var param="everynum="+everynum+"&totlenum="+totlenum+"&nowpage=0";
      //var param="data.xml";
       myAjax = new Ajax.Request("http://bbs.okajax.com/demo/4/demo.php",{method: 'get',parameters: param ,onComplete: showPage});
    }
    function showPage( request )
    {
       var xmlDoc = request.responseXML;
       var students = xmlDoc.getElementsByTagName("student");
       var result ="<table border=1><tr><td>Student ID</td><td>Student Name</td><td>Student Class</td></tr>";
       for (var i=0;i<students.length;i++)
       {
         result +="<tr>";
         var student = students[i];
         result +="<td>"+student.getElementsByTagName("id")[0].firstChild.nodeValue+"</td>";
         result +="<td>"+student.getElementsByTagName("name")[0].firstChild.nodeValue+"</td>";
         result +="<td>"+student.getElementsByTagName("class")[0].firstChild.nodeValue+"</td>";
         result +="</tr>";
       }
       result +="</table>";
       document.getElementById("data").innerHTML=result;
       document.getElementById("scroll_div").style.height=document.getElementById("data").offsetHeight;
    }
    var spage = 1;
    function on_scroll(obj){
    var page = Math.floor(maxpage*(obj.scrollTop+obj.offsetHeight)/obj.scrollHeight);
    page = page==0?1:page;
    if(page!=spage){
    spage = page;
    var info = document.getElementById("pageInfo");
    info.innerHTML=page+"/共"+maxpage+"页";
    var param="everynum="+everynum+"&totlenum="+totlenum+"&nowpage="+(page-1);
        //var param="data.xml";
        myAjax = new Ajax.Request("http://bbs.okajax.com/demo/4/demo.php",{method: 'get',parameters: param ,onComplete: showPage});
    }
    }
    </script>
    <div id="pageInfo"></div>
    <table>
    <tr>
    <td valign="top" align="right"><div id="data"></div></td>
    <td align="left"><div id="scroll_div" style="width:10px;height:300px;OVERFLOW-y:scroll;" onscroll="on_scroll(this)">
    &nbsp;<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    &nbsp;<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    &nbsp;<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    &nbsp;<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    &nbsp;<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    &nbsp;<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div></td>
    </tr>
    </table></body>
    </html>
      

  4.   

    http://extjs.com/deploy/dev/examples/grid/sliding-pager.html不行的话整Ext，老多特效了